How To Add Zoom Hover Effect to Image

To insert Zoom Hover Effect in Image, Follow These steps:

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above ]]></b:skin>

.hovergallery 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: 0.7;

margin: 0 10px 5px 0;

}

.hovergallery img:hover{

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-o-transform:scale(1.1);

opacity: 1;

}

4. Then if you want to active the effect, use this code

<a class="hovergallery" href="http://s2ptech.blogspot.com/" target="_blank">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq0iJhARdP-OAT8IX1MIsdFVQ7ZjYlBlMbyynRvW70LKe8vTI2Nwdr60NbA0fPjOeBYy9J-K-zzgFZ2NxMc9jGy4vboGYTVAhR7_C-C0u88jGb07dTnqQZQfaD2xwqHp2tIngCYEO8lF-L/s1600/logo.JPG" /></a>

=> Replace the Green code with your link
=> Replace the red code with image URL

5. Finish... Hopefully useful..

Go For Demo