JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img-wrap">
    <img src="http://www.theprintblog.com/wp-content/uploads/2012/09/The-21st-Century-Billboard.jpg" alt="" style="display: block;"/> <a href="#" class="img-info">
            <img style="width:50%;" src="http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons/glossy-black-icons-business/080837-glossy-black-icon-business-magnifying-glass-ps.png" />
        </a>
</div>

CSS

.img-wrap {
    position:relative;
    width:429px;
    padding: 0px !important;
}
.img-info {
    background-color:#444;
    top: 0;
    text-align: center;
    color:#fff;
    position:absolute;
    width: 100%;
    height: 100%;
    display: none;
}
.img-wrap:hover .img-info {
    opacity:0.5;
    display: block;
}