JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div class="ripple-eff">
  <div class="round-holder">
    <img src="https://cdn.pixabay.com/photo/2013/07/13/09/38/sphere-155819__340.png"/>
  </div>
</div>

CSS

body{
  margin: 120px;
}

.round-holder {
    width: 120px;
    height: 120px;
    float: left;
   display: flex;
}

.round-holder img {
  width: 100%;
  float: left;
  object-fit: cover;
}


.ripple-eff {
  display: block;
  animation: ripple 0.6s linear infinite;
  border-radius: 50%;
  position: absolute;
}

/* ripple effect */
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(0,0,255, 0.1),
                0 0 0 20px rgba(0,0,255, 0.1),
                0 0 0 40px rgba(0,0,255, 0.1),
                0 0 0 60px rgba(0,0,255, 0.1);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0,0,255, 0.1),
                0 0 0 40px rgba(0,0,255, 0.1),
                0 0 0 60px rgba(0,0,255, 0.1),
                0 0 0 80px rgba(0,0,255, 0);
  }
}