.image-slider-wrapper {
  border-radius: 5px;
  height: 750px;
  width: 60%;
  margin: 20px auto;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: slideshow 12s linear infinite;
  box-shadow: 0px 0px 12px 2px #1a1919ba;
  background-image: url("images/bg-1.jpg");
}
@keyframes slideshow {
  0% {
    background-image: url("images/bg-1.jpg");
  }
  30% {
    background-image: url("images/bg-2.jpg");
  }
  60% {
    background-image: url("images/bg-3.jpg");
  }
  90% {
    background-image: url("images/bg-4.jpg");
  }
  100% {
    background-image: url("images/bg-1.jpg");
  }
}

@keyframes slideshow-bubble {
  0% {
    background-image: url("images/bg-2.jpg");
  }
  30% {
    background-image: url("images/bg-3.jpg");
  }
  60% {
    background-image: url("images/bg-4.jpg");
  }
  90% {
    background-image: url("images/bg-1.jpg");
  }
  100% {
    background-image: url("images/bg-2.jpg");
  }
}

.image-slider-wrapper > .card {
  height: 20rem;
  width: 20rem;
  /* border:1px solid black; */
  position: absolute;
  bottom: 36%;
  right: 20px;
  background-color: white;
  transition: all 1s;
  border-radius: 3px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 50%;
  box-shadow: 0px 0px 9px 9px #1a191988;
}

.image-slider-wrapper > .card {
  background-color: green;
  background-image: url("images/bg-2.jpg");
  animation: slideshow-bubble 12s steps(1) infinite;
}

.pos-r {
  position: relative;
}
.pos-a {
  position: absolute;
}