JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div id="large">

</div>
<div id="small">
  <img src="https://ak.picdn.net/assets/cms/5bb580387901a83212e3028ab5a2fa8fb1153d7b-img_offset_2x.jpg" />
</div>

CSS

div {
  margin: 20px;
  padding: 10px;
}

#large {
  width: 600px;
  height: 400px;
  background-color: gray;
}

#small {
  width: 120px;
  height: 90px;
  background-color: orange;
}

img {
  width: 100%;
  height: 100%;
  transition: transform .3s ease-out;
  transform-origin:0 129px;
}
img.big{
  transform: scaleX(5) scaleY(4.4);
}

JavaScript

$(document).on("click", "img", function() {
  $(this).toggleClass("big");
});