How To Add Image Zoom Effect For Blogger(Blog trick)

Zoom hover effect is very special for making more beautiful look of images in blogger. Actually zoom hover effect is a effect that zooms pictures or screenshots when you move or put your mouse cursor on images in blogger.

It's really cool effect. Now let's see how to add image zoom hover effect. Remember it's only for blogger. You can see a demo for you


Go to Blogger → Design → Edit HTML

Back up your template for safety

Now tick on "Expand Widget Templates"

And find the following code Using CTRL+F

]]></b:skin> 

Paste following code just it

/*URL: http://www.edutechnology.net */
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
opacity: 1;
}

Save your template

When you want to show zoom hover effect on pictures you have to use class="hovergallery" this code. Let's see an example
This is a image link

<a href="http://3.bp.blogspot.com/-8IpQF4KqkH4/T1IfrH5q99I/AAAAAAAAAMQ/y5vnM5WEM0o/s1600/Blog-Exposure-300x300.jpg"<img src="http://3.bp.blogspot.com/-8IpQF4KqkH4/T1IfrH5q99I/AAAAAAAAAMQ/y5vnM5WEM0o/s320/Blog-Exposure-300x300.jpg" /></a>

Now you have to add class="hovergallery" this code if you want to enable this effect on pictures. See below

<a class="hovergallery" href="http://3.bp.blogspot.com/-8IpQF4KqkH4/T1IfrH5q99I/AAAAAAAAAMQ/y5vnM5WEM0o/s1600/Blog-Exposure-300x300.jpg"<img src="http://3.bp.blogspot.com/-8IpQF4KqkH4/T1IfrH5q99I/AAAAAAAAAMQ/y5vnM5WEM0o/s320/Blog-Exposure-300x300.jpg" /></a>

I hope you already understood. you have to insert this code class="hovergallery" manually to every image if you want to show the effect and it's very easy

Please make comment if any ask, we appreciate you to share our posts with your friends if you like