JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <h2>hello world</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper fermentum volutpat. Vestibulum varius ligula neque, vel rhoncus nunc maximus a. Maecenas leo odio, varius nec erat eu, finibus venenatis ex.</p>
</div>

<div class="block">
  <h2>hello world</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper fermentum volutpat. Vestibulum varius ligula neque, vel rhoncus nunc maximus a. Maecenas leo odio, varius nec erat eu, finibus venenatis ex.</p>
</div>

CSS

.block {
  width: 300px;
  height: 180px;
  border: dashed 2px gray;
  overflow: hidden;
  position: relative;
  float: left;
  margin: 1em;
}

h2 {
  width: 100%;
  height: 100%;
  margin: 0;

  color: red;
  font-size: 300%;
  background: url(https://www.catprotection.com.au/wp-content/uploads/2014/11/5507692-cat-m.jpg);
  background-size: contain;
  position: absolute;
  
  top: 0%;
  transition: top .7s ease-in;
}

h2.pew {
  top: 100%;
}

JavaScript

document.onclick = function (evt){
  if (evt.target.nodeName === 'H2')
		evt.target.classList.add('pew')
}