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.