JSFiddle - React, Tailwind, and code Playground

HTML

<div id="post-cont">
    <img id="post-img-1" class="post-img" src="http://placehold.it/250x250"/>
    <span id="post-txt-1" class="post-txt">Some text</span>
</div>

CSS

#post-cont {
    position: relative;
}

#post-cont img,
#post-cont span {
    display:block;
-o-transition: opacity .7s ease;
	-ms-transition: opacity .7s ease;
	-moz-transition: opacity .7s ease;
	-webkit-transition: opacity .7s ease;
	transition: opacity .7s ease;    
}

#post-cont img {
    position: absolute;
    top: 0;
    left: 0;
   opacity: 1;
}

#post-cont span {
    position: absolute;
    top: 100px;
    left: 80px;
   opacity: 0; 
}

#post-cont:hover img {
    opacity: 0;
}

#post-cont:hover span {
    opacity: 1;
}