JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <img src="http://placekitten.com/300" />
</div>
<div class="no">
    <img src="http://placekitten.com/300" />
</div>

CSS

div {
    width:300px;
    height:300px;
    position: absolute;
}
.no {
    left: 400px;
    top: 10px;
}

.box img {
   transition: 2s -webkit-filter;
   position:absolute;
   left: -3px;
   top:-3px;
    clip: rect(5px 295px 295px 5px);
    -webkit-transform: translateZ(0px);
}
div img {
   transition: 2s -webkit-filter;
   position:absolute;
   left: -3px;
   top:-3px;
    clip: rect(5px 295px 295px 5px);
}

div img:hover{
    -webkit-filter: blur(8px);
}