Add Zoom Hover Effect to Image

Now, we will make new effect. That's Add Zoom Hover Effect to Image. Shortly, when you put your cursor on an image, the image will be zoom (larger). Do you want to try the demo? OK, this is it. And if you want to know how to make the effect, just follow the steps below.

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://full-tricks.blogspot.com/" target="_blank"> <img_proxy_proxy_proxy_proxy_proxy_proxy_proxy src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrFD7aD4sRPtoS8efofBQ609REmZtDjgdPc4ug0nlPhZWMoIhEj6yMsJcXdp0AvtHHRmmGCEbaIIFuz4wIZbw1XuKVbIozkPduEkTLXz8ygd0ZreIaDd1eu5pEjUMcgP48BzyfgihXpgg/s1600/my-friend-ganesha-3-15-12x9.jpg" /></a>

5. Finish.....!