JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bl1" >
    <a href="#"><img alt="img" src="http://atemiks.16mb.com/test/img/img2.jpg" ></a>
    <div class="bl2" >
        <a href="#"><img alt="img" src="http://atemiks.16mb.com/test/img/img.jpg" ></a>
    </div>
</div>

CSS

.bl1, .bl2, img {
                height: 400px;
                width: 600px;
            }
            .bl1 {
                position: relative;
            }
            .bl2 {
                position: absolute;
                top: 0;
                left: 0;
            }
            .bl1:hover .bl2 {
                display: none;
            }