Contents tagged with CSS
-
JQuery Fancybox image gallery with mouseover zoom
I've been looking around for image zoom mouse over effect that works with my existing fancybox gallery and after a few hour googling I came up with simple and clean solution on my own. The good thing is that you don't need even a single row of javascript because it is CSS based and is cross-browser compatible (at least of whan I test it so far: IE, FF, Chrome, Safari, Opera)
So this is the CSS style:
a.elements img{width:100px;height:100px;}
a.elements:hover > img{width:200px;height:200px;z-index:1000;position:relative;top:-50px;left:-50px;}
.wrapper{position:relative;width:100px;height:100px;}
And the image with the wrapper and Fancybox:
<div class="wrapper"><a href="4.jpg" mce_href="4.jpg" class="elements" rel="group1"><img src="4.jpg" mce_src="4.jpg" alt="" /></a></div>
Hope it helps you.