Add circle effect on Blogger Post Images

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.

Image in Normal Mode

Image in circle Mode

Readmore: Add or Remove Border line and Modify Image Border color

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 www.bloggerspice.com */
.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;}