How To Create Auto Zooming Effect In Blogger Images

Many bloggers wish to have a responsive blog to attract users and for that purpose they search for different responsive template such as a template having responsive social sharing buttons, popular post widget, images zooming effect etc. But I prefer simple template so why don't they make simple template attractive and responsive, So I brought a css(cascading style sheet) effect which makes blog post images to auto zoom on mouse hover. You have to add a small piece of code to make your blog post images zoom automatically on mouse hover.
Follow the below steps to make your blog images responsive and attractive:

(1). Go to blogger.com and blog-in to your account.

(2). Go to template and click customize.

(3). On the customization page click Advanced and scroll down to the last option(Add css).

(4). Copy and paste the below code in Add css tab.

/* CSS image zoom effect by http://101Helper.blogspot.com */
.post img {-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: 93%;
height: 93%;
}
/*CSS image zoom effect http://101Helper.blogspot.com */

(5). Click Apply to blog on the top-right of the page and you are done!

(6). Check your blog for changes.

I hope this was helpful to you visit again for new tricks, follow and subscribe for latest news in inbox, share with others and help 101Helper grow.

Tags: How to create auto zooming effect in images in blogger, zooming effect in blogger, blogger images zoom, auto zooming css code, zoom images mouse hover.