JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cont">
    <div class="img" style="background-image: url('www.dims.ir/Gallery/Circle/20.jpg')"></div>
</div>

<div class="cont">
    <div class="img" style="background-image: url('www.dims.ir/Gallery/Circle/24.jpg')"></div>
</div>

CSS

.cont{
    width: 360px;
    height: 360px;
    overflow: hidden;
    background-color: #000;
    display:inline-block;
    cursor: pointer;
}
.cont:active {
    opacity: 0.65;
}
.cont:active {
    -webkit-transform: scale(0.98);
}
.img {
    width: 480px;
    height: 480px;
    -webkit-transition: scale .4s ease-in-out;
    -webkit-transition: translate 1s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
    opacity: 0.65;
}
.img:hover {
    -webkit-animation: anim 5s 1 ease-out forwards;
    opacity: 1.0;
} 
@-webkit-keyframes anim {
  12% { -webkit-transform: scale(1.1) translate(-10px, -10px) }
  100% { -webkit-transform: translate(-30px, -30px) scale(1.1) }
}