JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="wrap" data-text-1="cat" data-text-2="dog">
  <img src="http://rs1152.pbsrc.com/albums/p491/mress_1701/dogsandcats.jpg~c200" alt="" >
</div>

CSS

.wrap{
  width:200px;
  height:200px;
  background:#f00;
  overflow:hidden;
  position:relative;
  font-family:Arial;
}
.wrap img{
  display:block;
  max-width:100%;
}
.wrap:after{
  content:attr(data-text-1);
  display:block;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:#fff;
  text-align:center;
  padding:10px;
  transition:all .3s;
}
.wrap:before{
  content:attr(data-text-1) "\A and\A" attr(data-text-2);
  text-transform:uppercase;
  color:#fff;
  white-space: pre;
  opacity:0;
  position:absolute;
  left:0;
  right:0;
  top:0;
  display:block;
  padding:10px;
  text-align:center;
  transition:all .3s;
}
.wrap:hover:before{
  opacity:1;
}
.wrap:hover:after{
  bottom:-100%;
}