JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
  <img src="https://villageenterprise.org/wp-content/uploads/2019/07/IMG_1504-500x1000.jpg" />
</div>
<a href="#" class="toggle">Toggle</a>

CSS

#test {
  position: relative;
  width: 500px;
  height: 350px;
  overflow: hidden;
}
#test img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  transition: all 5s;
}
#test.active img {
  top: -100%;
  left: 0;
  transform: scale(0.5,0.5);
}

JavaScript

$(function() {
	$('.toggle').click(function(e) {
  	e.preventDefault();
    $('#test').toggleClass('active');
  });
});