GoodinBlogging: How To Add Image Zoom Effect to Images in Blogger

Image Zoom Effect : Well if You want to Make Some Cool effect with your Images in Blogger then This Image Zoom Effect is the Best One. Image Zoom Effect Works By Adding Simple CSS Code and Using Some Coding While Adding Images.

How it Works : The Image Will Appear Normally But When You Hover Mouse Pointer Over the Image Then the ZOOM Effect Appears.it is Very Special for adding a Beautiful look for images.

How to Add Image Zoom Effect For Images in Blogger

Go to Blogger Dashboard --> Design --> Edit Html
Now Check the Expand Widget Templates Option To Backup Template.
Now Find the Following Code Using CTRL+F

]]></b:skin>

Now Add the Below Code Above 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;
}

Now Save the Template. Wait Only 50% of Work is Done.

How to Use This Effect For Images in Blogger :.

Whenever You Want to Add this Effect to Images then You've To add class="hovergallery" Tag to the images.

For Example Like this

<a class="hovergallery"href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD7qqZn_Euxb4Kl0xJ7vaajBj5rKdk-88rz0mIJk-Cosg9mvDLl02dSgwkNzGTRKO_txVrI5Ld9IKT6z8K1vNblLZpa_LUj7yf-BFec9mYISWmkZpJ_0k_TC3ZL6GbDvOgVQi_7r1-UXU/s200/Friendship-Rocks-true-buddies-23370707-564-399.jpg"<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD7qqZn_Euxb4Kl0xJ7vaajBj5rKdk-88rz0mIJk-Cosg9mvDLl02dSgwkNzGTRKO_txVrI5Ld9IKT6z8K1vNblLZpa_LUj7yf-BFec9mYISWmkZpJ_0k_TC3ZL6GbDvOgVQi_7r1-UXU/s200/Friendship-Rocks-true-buddies-23370707-564-399.jpg" /></a>

That's it.You've to Manually Add the Above Code to Every image to Which You want to Add this Effect.That's it Enjoy

GudinBlogging

How To Add Image Zoom Effect to Images in Blogger

0 comments: