javascript - Why isn't overlay working on all images? -
i'm coding image overlay w/ jquery, , got working (somewhat). if hover on first image, appears; however, if hover on second one, doesn't work. don't know problem is! think has unique ids or whatever. tried classes, , didn't work.
here fiddle :: http://jsfiddle.net/pfwcz/7/
$(document).ready(function () { $('.overlay-link').mouseover(function () { $(this).find('.overlay').fadein(200); }).mouseleave(function () { $(this).find('.overlay').fadeout(200); }); });
you need make overlay-link
elements containers child elements inherit positions.
<a class="overlay-link"> <img src="https://d13yacurqjgara.cloudfront.net/users/67256/screenshots/1191507/shooot.png"/> <span class="overlay"><i>hellllllllooooooo</i></span> </a>
your overlay-link
class needs have position: relative
, define position , size of , children:
.overlay-link { position: relative; display: block; width: 292px; height: 219px; margin: 30px; }
any child inside needs have position: absolute
, width , height set 100% of container:
img { position: absolute; border-radius: 2px; width: 100%; height: 100%; top: 0; left: 0; } .overlay { background-color: rgba(223, 71, 71,0.70); width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 2px; display: none; text-align:center; }
now when hover on element, create overlay on element , not other 1 experiencing earlier.
jsfiddle: http://jsfiddle.net/pfwcz/14/
Comments
Post a Comment