Currently, I am working on creating a set of thumbnails that enlarge when hovered over. The initial setup achieves the zoom effect using CSS3 transform:scale and ease-in-out. However, the issue is that the enlarged images overlap each other due to sharing a single z-axis.
I need help in implementing a JavaScript solution to properly position each thumbnail along a z-axis that ensures each enlarged image appears on top of the others.
You can view a demonstration on my website here: demo Updated: Solved
Here is a snippet of the code:
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');
});
});
This page uses the above script to toggle the 'hover_effect' class, which increases the scale of the div to 150%.
Solution: z-index:999
Any suggestions for adding a delay to the initial mouseenter without using setTimeOut?
Any feedback or solutions would be greatly appreciated!
p.s. This demo utilizes a customized version of the masonry image gallery.
Thank you.