JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<p class="title">
This is the Title
</p>
<p class="paragraph">
This is a longer paragraph, so you can show more info.
</p>
</div>
<div>
<p class="title">
This is the Title
</p>
<p class="paragraph">
This is a longer paragraph, so you can show more info.
</p>
</div>
<div>
<p class="title">
This is the Title
</p>
<p class="paragraph">
This is a longer paragraph, so you can show more info.
</p>
</div>
<div>
<p class="title">
This is the Title
</p>
<p class="paragraph">
This is a longer paragraph, so you can show more info.
</p>
</div>
<div>
<p class="title">
This is the Title
</p>
<p class="paragraph">
This is a longer paragraph, so you can show more info.
</p>
</div>
<div>
<p class="title">
This is the Title
</p>
<p class="paragraph">
This is a longer paragraph, so you can show more info.
</p>
</div>

CSS

div {
  float: left;
  position: relative;
  width: 200px;
  height: 200px;
  padding: 10px;
  margin: 10px;
  background: url("http://img14.deviantart.net/2ab0/i/2012/120/e/f/generic_green_wallpaper_by_bloodfury99-d4l7pik.png") no-repeat center center;
}

div:hover {
  background: url("https://pixabay.com/static/uploads/photo/2015/11/30/13/42/red-texture-1070355_960_720.jpg") no-repeat center center;
}

div p{
  position: absolute;
}

div .title{
  transition: 0.3s;
  opacity: 1;
}

div:hover .title {
  transition: 0.3s;
  opacity: 0;
}

div .paragraph{
  color: #fff;
  transition: 0.3s;
  opacity: 0;
}

div:hover .paragraph{
  transition: 0.3s;
  opacity: 1;
}