JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <a class="static" href="/dfgd">
    <img class="bo" src="http://news.bbcimg.co.uk/media/images/74113000/jpg/_74113834_74113833.jpg">
  </a>
</div>

CSS

.box {
  padding: 100px;
  background-color: #eee;  
}
.static {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid red;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  z-index: 10;
}
.static:hover {
  border: 3px solid green;
}
.bo {
  width: 300px;
  position: relative;
}

.static:hover .bo {
  -webkit-animation: imgBuble 0.5s linear forwards;
}

@-webkit-keyframes imgBuble {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }
}