I am trying to build a series of thumbnails that increase on hover. My pre-build has the function of zooming in / out with CSS3 transform: scale and ease of use. The problem is that they overlap each other because they have one z axis.
Can someone help me in creating an add-on to this javascript script that correctly positions each thumbnail along the z axis, which makes sense, that is, each enlarged image is resized to be on top of every other image.
Demo on my site here: demo Updated: Baxin
Code Preview:
HTML:
<div style="position: absolute;" class="item hover"> <a href="#"><img alt="two" src="img/posts.png"></a> </div>
CSS
#main div.hover { position: relative; z-index:200; display: block; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; background-color: #297ab1;} #main div.hover:hover, #main div.hover_effect { -webkit-transform:scale(1.5, 1.5); -moz-transform:scale(1.5, 1.5); -o-transform:scale(1.5, 1.5); -ms-transform:scale(1.5, 1.5); transform:scale(1.5, 1.5);}
script:
$(document).ready(function() { $('.hover').bind('touchstart touchend', function(e) { e.preventDefault(); $(this).toggleClass('hover_effect'); }); });
Thus, this page uses this script to switch the hover_effect class, which increases the scale of the div to 150%.
Solution: z-index:999
Also got ideas on delay loss in the initial center of the mouse without setTimeOut?
Any suggestions and solutions are most appreciated!
ps This demo uses a modified version of the masonry image gallery.
Thanks.
source share