Add circle effect on Blogger Post Images

blog image effect


blog image effect

This is a simple tutorial for adding some extra spice on blogger posts images. Previously I have released many tutorial about effect on blogger images but now sharing with you a different one. We have seen many blogger template has released with circle image. However you can add circle image effect on mouse over by using this trick. I am use ease-in-out code for creation the effect. By the help of this tutorial you would able to add a circle effect all on your blog images. It will enable a visitor to shrink your blog images in a circle. This is pretty cool.  But this effect will be added on your whole blog posts body and home page images. But don't worry it won't affect your popular post of any other widget's images. This tutorial is for adding some animation on your blogger template nothing else.

original image
Image in Normal Mode

rounded mode
Image in circle Mode

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl+F 

Step 4 Paste the below code  Before/above ]]></b:skin> and Save the templates.

/*Trick by */
.post img:hover{background:#FEFEFE;border:1px solid #FEFEFE;border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;-moz-transition:all 1.2s ease-in-out;transition:all 1.2s ease-in-out;-webkit-transition:all 1.2s ease-in-out;}


  • Change #FEFEFE this for image background color.
  • Change #FEFEFE this for image border color.

I hope you like this effect and after adding the code check your blog to see the effect on live.

Post a Comment

Nice sharing bro. this circle look's good

Yes Rizwan it will create just like an animation on your blog image.

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *