Zooming Effect Optimized Version

How to add a Zoom effect to your blog Images on mouse move

Part II (Optimized Version)

In previous post I show you a really amazing zooming effect that can use to impress your blog visitors, also I told you that I’ll show you another inconceivable zooming effect. This is also like the previous one. But i think this one is cuter than previous one.

Lets see how it looks like

Here is a preview

How to add this effect

Ok here is how to do it

Simply Search for “]]></b:skin>” on Edit Html  and place the below mentioned code just above it

.bloggers2 img{

-webkit-transform:scale(0.8);

-moz-transform:scale(0.8);

-o-transform:scale(0.8);

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;

-o-transition-duration: 0.5s;

opacity: 1;

margin: 0 10px 5px 0;

}

.bloggers2 img:hover{

-webkit-transform:scale(0.9);

-moz-transform:scale(0.9);

-o-transform:scale(0.9);

opacity: 1;

}

Tags: How to add zoom, Zoom effect, zoom effect for blog, Image zooming, Picture zooming, Image zooming for blog

Posted in: Blog Tricks