JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">
    <img class="art" src="http://farm4.staticflickr.com/3133/3255025717_49268c7c85_z.jpg?zz=1">
    <img class="search" src="http://icons.iconarchive.com/icons/deleket/scrap/256/Magnifying-Glass-icon.png">
    <img class="play" src="http://icons.iconarchive.com/icons/icons-land/play-stop-pause/256/Play-Normal-icon.png">
    <div class="cover"></div>
</a>

CSS

.art { width:320px; height:240px; }
.search { z-index:3; position:absolute; top:90px; left:130px; width:75px; height:75px; display:none; }
.play { z-index:2; position:absolute; top:90px; left:130px; width:75px; height:75px; } 
.cover { z-index:1; position:absolute; top:8px; left:8px; width:320px; height:240px; background:#000; opacity:0.5; display:none; }

.art:hover ~ .search { display:block; }
.art:hover ~ .play { visibility:hidden; }
.art:hover ~ .cover { display:block; }

.search:hover ~ .play { display:none; }
.search:hover ~ .cover { display:block; }