JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid-wrap">
    <div class="grid" >
        <figure ><img src="http://placehold.it/40x40" alt="img01"/></figure>
        <figure ><img src="http://placehold.it/40x40" alt="img01"/></figure>
        <figure ><img src="http://placehold.it/40x40" alt="img01"/></figure>
        <figure ><img src="http://placehold.it/40x40" alt="img01"/></figure>
        <figure ><img src="http://placehold.it/40x40" alt="img01"/></figure>
        <figure ><img src="http://placehold.it/40x40" alt="img01"/></figure>
        <figure ><img src="http://placehold.it/40x40" alt="img01"/></figure>
    </div>
</div><!-- /grid-wrap -->

CSS

.grid figure{background-color: black}
.grid figure:hover {
    background: transparent url(https://cdn3.iconfinder.com/data/icons/linecons-free-vector-icons-pack/32/search-128.png) no-repeat 0 0;
}
.grid figure img {display: block;width: 100%;}
.grid figure img:hover {opacity: 0.6;transition: opacity 0.3s;}