How to add a Zoom effect to your blog Images

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

This is very graceful effect that can use to surprise your blog readers. I’m sure they all will really love it. Lets see how to insert it to your blog.

Here is a preview

OK here is the simple trick

Logging to your blogger account

Go to Edit HTML

Search for “]]></b:skin>” and place the under mentioned code just above it

.bloggers1 img{
-webkit-transform:scale(0.5); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.5); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.5); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.8;
margin: 0 10px 5px 0;
}


.bloggers1 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

Then…..

When you insert image to your blog go to edit html and ad this code before your image url “  <div class="bloggers1"> ”

After the image url ad  </div>

Now you are done

Save and see what happen.

this zooming effect is a basic effect that most bloggers use in there blogs. in next post i'll tell you a another version of this  zooming effect.








Tags : how to add zooming effect, blog zooming, zooming images, mouse move zooming

Posted in: Blog Tricks