jquery - how to mantain mouseover / hover on a concealed div -

i trying combine 2 effects on grid of images, 1 image grows within frame when mouse hovers on , reverts when mouse leaves frame, , semi-transparent div appear on image links other places.

the code using image zoom here:

$(function () { //the size of image when hovered over, 200/0/0 $('#container img').hover(  function () {     var $this = $(this);     $this.stop().animate({         'opacity': '1.0',             'height': '500px',             'top': '-66.5px',             'left': '-150px'     },     //this following number defines speed of animation enlargement ( in ms)     20); },  function () {     //the size of image when left alone     var $this = $(this);     $this.stop().animate({         'opacity': '0.5',             'height': '400px',             'top': '-66.5px',             'left': '-150px'     },     //this following number defines speed of animation normal ( in ms)     700); }); }); 

and code semi-transparent mask, hidden div containing links, here:

$('.lbwrap.1').hover(function () { $('.over').fadein(); }, function () { $('.over').fadeout(); }); 

a working demo here (note third image on top row has div in place): http://jsfiddle.net/9wumj4nq/

the problem im having when div appears on image, mouse ceases hover, means image underneath shrinks original size. how keep bottom image zoomed in while covering div in place?

thanks lot

problem binding events on img. not that. bind event on container, i.e. div class lbwrap in case.

relevant jquery code:

$('.lbwrap').hover(function () {     $(this).find('.over').fadein(); }, function () {     $(this).find('.over').fadeout(); }); 

and:

$('.lbwrap').hover(     function () {         var $img = $(this).find("img");         $img.stop().animate({             'opacity': '1.0',                 'height': '500px',                 'top': '-66.5px',                 'left': '-150px'         }, ... 

demo fiddle: http://jsfiddle.net/abhitalks/9wumj4nq/2/

.

---

better option:

do not use jquery @ this. can make use of css3 transitions. css transitions more efficient javascript based animations.

relevant css:

lbwrap img {     transform: scale(1);         transition: 500ms all;     opacity: 0.5; }  div.lbwrap:hover img {     transform: scale(1.5);     opacity: 1; }  div.lbwrap:hover .over {     display: block; } 

demo fiddle: http://jsfiddle.net/abhitalks/9wumj4nq/1/

.