Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
Pin It

Add Zoom Effect To Your Blog Images On Mouse Hover

by Durodola Ridwan | Thursday, January 03, 2013 | | 16 Comments

I have shared lot's of tutorials on how to add different effect to images, but now, we will be talking on how to add zoom effect to images on mouse hover.
For a demo of what we are talking about, kindly hover your mouse cursor on the image below and see the awesome effect.


How To Add Zoom Effect To Images

  • Go to your blogger dashboard
  • Click on Template > Edit HTML > Proceed
  • Use ctrl F to find ]]></b:skin> and paste the following code above/before it.

.zoomeffect img{
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;

.zoomeffect img:hover{
opacity: 1;
  • Click on Save template

How To Activate it On Images

Whenever you have uploaded any image in your post editor, simply switch to HTML mode and change the class from what ever it is, to zoomeffect.
Example: Your image class in post editor will be <div class="seperator", now change it to <div class="zoomeffect"

If you are adding it to any other part on your blog, you can use the following code.

 <a class="zoomeffect" href="YOUR-IMAGE-URL/" target="_blank">
<img src="http://YOUR-IMAGE-URL" /></a>

Replace YOUR-IMAGE-URL with the link of the image you want to apply the effect to.
That's all!

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

16 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. thank uu so much, this is the best hover-on-zoom gadget i found, i have used it in my blog, techytawks.blogspot.com, its awesum thank you. do visit the page

    1. You are welcome Danish, glad that you found it usefull for your blog :)

    2. Hi. I am shifting my blogspot site to wordpress. I have two questions:

      1) Do blogger blogs have any preference in Google search results?
      2) How to use this zoom effect feature in WordPress.

      I hope you would

  2. Hi
    Nice blog
    I have used this code copied from here
    Friends Check Out
    Pak India fashion styles Provides Updates On Fashion In Pakistan & India.

  3. Thanks for nice post. I found it very easy to use it on my blog SoftwareDon, a gadgets technology blog.

  4. thank to your code, but how to change the size of images when hover ? thanks

    1. scale (1.1); represent the image size on hover. Edit the values.

  5. This comment has been removed by the author.

  6. Replies
    1. Just replace .zoomeffect with .post-body from the above code and paste it where it was specified.

  7. I have two questions
    1. How to remove white page in my blog ?
    2. How to zoom menu items on mouse hover or selection ?

    I am having dynamic template in my blog


  8. Visit this site for read more in bangla http://urojahaj.blogspot.com/

  9. আপনি কি ঘরে বসে আয় করতে চান ? তাহলে সাইন আপ করুন। http://eshopori.com/

  10. does Qoutation is also included (")
    for class=zoomeffect ??
    or it is really class="zoomeffect"


About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger