jquery - a dark transparent mask for div -
i trying apply dark transparent mask on product div when hovers on product image. have created mask whole screen before. used same logic time well, acts weird. tried use mouseenter, mouseleave doesn't work. mask keeps appear disappear mouse pointer did not leave image. below how looks: , don't know why mask target whole screen when target box1 in jquery.
html
<div id="box1"> <img src="http://smilesoftware.com/assets/images/uploads/products/icon_pdfpenipad_140x140.png" alt="orange" title="orange" /> <a href="#">view detail</a> </div> css
div#box1 { border: #999 2px solid; width: 180px; height: 250px; } div#box1 > img { position: absolute; z-index: 2000; max-height: 240px; } div#box1 >a { display: none; position: absolute; top:100px; left: 40px; margin: 10px 0 0 10px; z-index:3000; background: white; text-decoration: none; } div#box1:hover { display:block; } #mask { display:none; background: #000; position:fixed; left: 0; top: 0; z-index: 2500; width: 100%; height: 100%; opacity: 0.75; } jquery
$('#box1 img').mouseenter(function () { $('#box1').append('<div id="mask"></div>'); $('#mask').fadein(400); }); $('#box1 img').mouseleave(function () { $('#mask').fadeout(400, function () { $('#mask').remove(); }); }); if have idea doing wrong, appreciated. thank you.
from comment, using pseudo element , no jquery demo:
div#box1 { border: #999 2px solid; width: 180px; height: 250px; position:relative; text-align:center; } div#box1 > img { position: relative; z-index: 1; max-height: 240px; } div#box1 >a { display: none; position: absolute; top:100px; left: 40px; margin: 10px 0 0 10px; z-index:3; background: white; text-decoration: none; } div#box1:hover { display:block; } div#box1:before{ content:''; background: #000; position:absolute; left: 0; top: 0; bottom:0; right:0; z-index: 2; width: 100%; height: 100%; transition:0.4s; opacity:0; } div#box1:hover:before{ opacity:0.75; }
Comments
Post a Comment