<div style="margin-top: 20px;">

  <figure class="wave">
    <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1602040491414/RKBo8jy-u.jpeg" alt="rajni"></img>
    <figcaption>Rajinikanth</figcaption>
  </figure>

  <figure class="wave">
    <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1602040470953/tCodF_LJ9.png" alt="chuck"></img>
    <figcaption>Chuck Norris</figcaption>
  </figure>

  <figure class="wave">
    <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1602040482117/DU28C3ZZ1.png" alt="chan"></img>
    <figcaption>Jackie Chan</figcaption>
  </figure>

  <figure class="wave">
    <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1602040456162/jUM3UTpdS.png" alt="bean"></img>
    <figcaption>Mr. Bean</figcaption>
  </figure>

</div>

body {
  background: #000000;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding:10px;
  font-family: 'Roboto Mono', monospace;
}

.wave {
  float: left;
  margin: 20px;
  animation: wave  ease-in-out 0.5s infinite alternate;
  transform-origin: center -36px;
}

.wave:hover {
  animation-play-state: paused;
  cursor: pointer;
}

.wave img {
  border: 5px solid #f8f8f8;
  display: block;
  width: 200px;
  height: 250px;
}

.wave figcaption {
  text-align: center;
}

.wave:after{
  content: '';
  position: absolute;
  width: 20px; 
  height: 20px;
  border: 1.5px solid #ffffff;
  top: -10px; 
  left: 50%;
  border-bottom: none;
  border-right: none;
  transform: rotate(35deg);
}
       
.wave:before{
  content: '';
  position: absolute;
  top: -23px;
  left: 50%;
  display: block;
  height: 44px;
  width: 47px;
  background-image: url(https://cdn.hashnode.com/res/hashnode/image/upload/v1602040503586/FW6g79WBY.png);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  z-index: 16;
}
        
@keyframes wave {
  0% { transform: rotate(10deg); }
  100% { transform: rotate(-10deg); }
}