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;
}
-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