JSFiddle - React, Tailwind, and code Playground

HTML

<div >
<figure class="tile">
<img class="rotate" src="http://placekitten.com/300/300" />
<figcaption>
  <div class="tile_text">
  <p>
  Your text
  </p>
  </div>
</figcaption>
</figure>
</div>

CSS

.tile
{
	position:relative;
  width:300px;
  height:300px;
}
.tile figcaption
{
  width:100%;
  height:100%;
	margin:0;
	position:absolute;
  top:0;
  left:0;
  bottom:0;
	transition:all cubic-bezier(0, 0.82, 0.74, 1.02) 0.7s;
  -webkit-transition:all cubic-bezier(0, 0.82, 0.74, 1.02) 0.7s;
  opacity:0;
  transform:rotateY(-180deg);
  background-color: lightgray;
  
  
}
.tile:hover figcaption
{
	opacity:1;
  transform:rotateY(0deg);
}
.tile_text
{
  margin:20px;
  border:1px solid #fff;
  min-width:calc(100% - 40px);
  min-height:calc(100% - 40px);
  
}