Receive More Updates

Date: - Time:
SMS: Send FOLLOW BLAZERWAP To 40404 For Free - EMAIL: Blazerwap@gmail.com

Monday, 4 July 2016

New Way To Add Auto Zooming Effect On Blogger Post Images

As you can see, every web designer has to make his or her website look professional and to have  a responsive codes like the features; popular post widget, recent post widget, social sharing buttons and let me also add image Zooming Effect images. So you can also make it in simple template to also look attractive because I prefer simple template and responsive codes that's why I have to bring up this amazing CSS code which is also called CASCADING STYLE SHEETS.

It allows a blogger post images to zoom in and out after a mouse hover on it. Is just like the one in this blog (blazerwap.com), so it will be very easy for your users to do and it will also be easy for your users to trace or understand your tutorial or what you are posting easily without asking more questions on what a particular image is all about.

There are two methods to insert it on your blogger, so I will teaching you webmasters the two methods which is very simple in inserting so follow up the tutorial now below.

Read also: How To Add Sitemap And Robots.txt In Wapka, Blogger And Mywapblog For Fast Google Crawling

First method to insert the CSS code to zoom images on Blogger post images
  • Login to your blogger account panel.
  •  Click on TEMPLATE.
  •  Then click on CUSTOMIZE.
  •  Then click on ADVANCED at the left side of listed functions then at the right side some features will also be listed out so scroll down till you see ADD CSS then click on it. 

  • You will see an empty blank white box but if you have been editing your website, you will some codes you have inserted. 
  • Then insert the following code in it below:
Image zoom code in blogger 

/* CSS image zoom effect by http://blazerwap.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://blazerwap.com */




Width: 93% - is the length of the image so you can change it to any percentage you want it to zoom when a mouse hover it.

height: 93% - is the height of the image so you can change it to any percentage you want it to zoom when a mouse hover it.

After inserting it then click on APPLY TO BLOG, so check on your blog and hover over your images then you will see the difference. So enjoy with the first method.

Read also: New Top Twelve Custom Search Box Codes For Your Blogger

Second method to insert the CSS code to zoom images on Blogger post images

Login your blogger account
Click on TEMPLATE
Click on EDIT HTML
Look for  ]]></b:skin> then insert the above code just after it.
Then save and view your blog, and feel the blazing changes!

See before and after screenshots below that shows is 100% working 


After mouse hover it


Is this post helpful? If is helpful to you, kindly drop your comments and if it higher than your understanding, kindly tell us below and we will resolve it for you. Share your experience if it works for you below!

Read also: New Top Commentators Code With Avatar In Blogger

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, wide images zooming, big and wide images zooming, images zooming.

6 comments:

Is this post helpful?

Your comment(s) are highly appreciated to this post. Be the first to comment and make sure you also share to your friends and families about this post, for them to also benefit from it.

Share to all social networks like Facebook, Twitter and others social network you may know.

Are you finding it difficult to drop a comment here? Kindly click here and learn how to comment on Blazerwap.com