JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <img src="https://via.placeholder.com/1000.png" alt="">
  <img src="https://via.placeholder.com/1000.png" class="noborder" alt="">
</div>

CSS

div {
  text-align: center;
}

img {
  height: 50px;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  outline: 1px solid #000;
  border: none;
  margin: 100px;
}

img.noborder,
img.noborder:hover{
  border: none;
  outline: none;
}

img:hover {
  border: 1px solid #000;
  outline: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(5);
  -moz-transform: scale(5);
  -ms-transform: scale(5);
  -o-transform: translateZ(0) scale(5);
  transform: translateZ(0) scale(5);
}