Add CSS Auto Zoom Effect To Post Images On Blogger




| 11 comments

OK over the next week or so I want to focus on some cool image effects for the images you use in your blog posts.Previously we have shown you some basic effects you can add to images on your blog.But with the advancement of CSS we can now use better effects with less code and all in a way even an absolute beginner can do it.Also I will be presenting this in a way that once the code is added the effect will be on only images within your posts.We will be adding some more fancy effects in the next few posts but we will start with a neat zoom.

The first effect we will cover is a nice zoom were upon the image will be displayed as normal then when you place the cursor over it the image grows to a zoom.This is a good effect in two ways, if you actually want visitors to be able to zoom into your images or if you just want something that looks cool.

Check out the demo below (On the demo page hover over any of the images in the post) :

View Demo Button

Add Css Zoom Effect To Blogger

Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.


Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.
(Note : Some people have found the "Apply To Blog" button can not be clicked if so after the code click space)

/* CSS image zoom effect http://www.spiceupyourblog.com */
.post img {
height: 100%;
width: 100%;

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;

}

.post img:hover {
width: 150%;
height: 150%;
}
/*CSS image zoom effect http://www.spiceupyourblog.com */

That's the effect added, easy.Drop your comments and questions below.

AuthorAuthor - Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

11 comments:

  1. Congrats again Paul, very nice job!!

    Thank you!!

    ReplyDelete
  2. Nice trick, but it make small img look bad :(

    ReplyDelete
  3. Hello,

    Nice post, I guess it should used to images with good resolution or large images. I'll surely give a try to it.

    Thanks

    ReplyDelete
  4. Nice post! You did a very good job :)

    ReplyDelete
  5. Thank you very much for sharing this post. You did a great job :)

    ReplyDelete
  6. Exactly what I was looking for! I've been trying to figure out how to do this for a few days now (where are my tech savvy kids when I need them?) and this blog really walked me through it. Thanks for sharing!

    ReplyDelete
    Replies
    1. Your Welcome Jacob.It is a great effect and looks quiet impressive.

      Delete
  7. how to give blogger images default opener .. i mean in my new template images doest open in that viewer which was in last template (bloggers default template ) plz help paul

    ReplyDelete
  8. Great post friend. Keep it up.
    Have a nice day

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us