JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="pic"></div>
    <div class="textstuff">
    <p>This is the textstuff This is the textstuff This is the textstuff This is the textstuff This is the textstuff This is the textstuff This is the textstuff This is the textstuff This is the textstuff This is the textstuff This is the textstuff This is the textstuff This is the textstuff This is the textstuff This is the textstuff This is the textstuff</p>
    </div>
</div>

CSS

.wrapper {
    position: relative;
}

.pic {
    background-image:url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.textstuff {
    visibility:hidden;
}
.pic:hover ~ .textstuff {
    visibility:visible;
    color:black;
}
.pic:hover {
    opacity: 0.3;
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}