Im attempting to build a series of thumbnails that enlarge on hover. My preliminary build accomplishes the enlarge/zoom part by using CSS3 transform:scale and ease-in-out. The problem is that they overlap each other because they share a single z-axis.
Can anyone assist me in creating a javascript addition to this scenario that correctly positions each thumbnail in a z-axis that makes sense, i.e. each enlarged image resizes to be on top of each other image.
Demonstration on my website here: demo Updated: Solved
Preview of 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');
});
});
So this page uses this script to toggle the hover_effect class that increases the div's scale to 150%.
Solution: z-index:999
Also any ideas about putting a delay in the initial mouseenter without a setTimeOut?
Any suggestions and solutions are most appreciated!
p.s. This demo uses a modified version of masonry image gallery.
Thanks.
Untested:
#main div.hover:hover, #main div.hover_effect {
z-index: 999
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With