JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<div class="parent">
  <span class="child">
    <img src="https://i.ytimg.com/vi/OdIJ2x3nxzQ/hqdefault.jpg" alt="" />
  </span>
</div>

CSS

.parent{
  max-width: 400px;
  margin: 25px auto;
}
.child{
  display: block;
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.child > img{
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.child > img:hover{
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}