JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" rel="nimblebox[nimble_portfolio_gal_default]" title="Youtube - Guardians of the Galaxy">
                <img src="http://demo.nimble3.com/nimble-portfolio/wp-content/uploads/2014/08/Guardians-of-the-Galaxy-385x480.jpg">
                <div class="-mask"> </div>
                <div class="genericon genericon-zoom"></div>
            </a>

CSS

a{
  position:absolute;
  z-index:0;
}
.-mask {
    background: #000;
    opacity: 0.75;
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    text-decoration: none;
    z-index:999;
}

JavaScript

$('a').hover(
function(){
	$('.-mask').css('display','block');
},
function(){
	$('.-mask').css('display','none');
}
);