JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1">
    <img src="http://lorempixum.com/400/400/" alt="blah" />
<p>Pitchfork photo booth, DIY cardigan messenger bag butcher Thundercats tofu you probably haven't heard of them whatever squid VHS put a bird on it. </p>
</div>

CSS

#box1 {
position:relative;
display:block;
width:400px;
height:400px;
    border:1px solid black;
}

#box1 img{
    position:absolute;
    top:0;
    z-index:1;
    display:block;
    opacity:0;
    -webkit-transition:all .5s ease;
}

#box1 p{
    display:block;
    position:absolute;
    top:0;
    margin:10px;
    z-index:100;
    color:rgba(0,0,0,1);
    -webkit-transition:all .5s ease;
}

#box1:hover img{
    opacity:1;
}

#box1:hover p{
    color:rgba(0,0,0,0);
}