JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <img src="https://via.placeholder.com/1000.png" alt="" style="width: 320px; height: 320px;">
  <img src="https://via.placeholder.com/1000.png" alt="" class="zoom" style="width: 80px; height: 80px;">
</div>

CSS

div {
  text-align: center;
  transform: translate3D(0, 0, 0);
}

img {
   -webkit-transform: translateZ(0) scale(1);
  height: 250px;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  border: 5px solid #000;
}

img.zoom:hover {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
 -webkit-transform: translateZ(0) scale(4);
 border: 5px solid #FFFFFF;
}