There are four div elements, and on mouseover, the selected div will get zoomed. However, I also need to capture the mouseover event for the remaining three underlying divs, even when one is overlayed. This way, I can zoom out the previously selected div and zoom in the currently hovered one.
Take a look at my example on JSFiddle: http://jsfiddle.net/aniprasanth/7jFGH/1/
The HTML code looks like this:
<div id="main_window">
<div class="multi-window">
<div class="zoomer tile">
<img src="images/img1.jpg" width="207" height="138" />
</div>
</div>
<div class="multi-window">
<div class="zoomer tile">
<img src="images/img2.jpg" width="207" height="138" />
</div>
</div>
<div class="multi-window">
<div class="zoomer tile">
<img src="images/img3.jpg" width="207" height="138" />
</div>
</div>
<div class="multi-window">
<div class="zoomer tile">
<img src="images/img4.jpg" width="207" height="138" />
</div>
</div>
</div>
The CSS code is as follows:
#main_right #main_window {
height: 320px;
width: 460px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
position: relative;
}
.multi-window {
height: 150px;
width: 218px;
float: left;
margin-right: 11px;
margin-bottom: 10px;
cursor: pointer;
}
.zoomer {
height: 140px;
width: 208px;
cursor:pointer;
}
.zoom {
height: 301px;
width: 450px;
float:none;
margin:0px;
cursor:pointer;
position:absolute;
left:0;
top:0;
background-color:#FFF;
}
.multi-window img {
width:100% !important;
height:100% !important;
}
And finally, the script:
$('.zoomer').on('mouseenter',function(e){
$(this).addClass('zoom').removeClass('zoomer');
$('.zoom img').css({
'width':'100%',
'height':'100%'
});
$(this).bind('mouseleave click', function(){
$(this).removeClass('zoom').addClass('zoomer');
$('.zoomer').removeClass('zoomer');
});
});