Hover Image Base Code

<style>
.misterCrabContainer{
 width:420px;
height:186px;
}

.misterCrabImage{
opacity:1;
display:block;
transition: .5 ease;
backface-visibility:hidden;
}

.misterCrabText{
transition:.5 ease;
opacity:0;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align:justify;
}

.misterCrabContainer:hover image{
opacity:0.3;
}

.misterCrabContainer:hover .misterCrabText{
opacity:1;
}

.misterCrabInsideText{
background:#fff;
color:#000;
font-size:12px;
font-family:Georgia;
text-align:justify;
overflow:auto;
}
</style>






<div class="misterCrabContainer">
<img src="https://i.imgur.com/9F9hLCO.png" class="misterCrabImage">
<div class="misterCrabText">
<div class="misterCrabInsideText">
this is where your coding goes.
</div>
</div>
</div>