JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid-wrap">
    <div class="grid">
        <figure class="figure">
            <img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-3.jpg"/>
            <img src="http://searchengineland.com/figz/wp-content/seloads/2012/04/penguin.jpg" class="hov" alt="img01"/>
        </figure>
    </div>
</div>

CSS

figure img {
    position: absolute;
    width: 293px;
    height: 170px;
}
img.hov {
    visibility: hidden;
}
.figure:hover img.hov {
    visibility: visible;
    opacity : 0.4;
    z-index:1;
}