Add a Round Hover Effect in Images at Post V2

Hello frnds as you know that last time you got a tutorial about add the hover effect in all images as a shadow effect and in this post you get to know that how to add a circle hover effect in the images like as you can see in the live demo in the below image. This is very simple trick and this is possible by the CSS code, you just have to add some CSS codes and you will be able to do this task. Hope you will gonna like it. It will gonna fun with it.

Read Also - Hover Effect Pack on Images

1. Add a Hover Effect in Images at Post

2. Add a Round Hover Effect in Images at Post V2

Add Circle Hover Effect in Post V2

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML
• Press Ctrl + F and search the code shown below.

]]></b:skin>

• Paste below code before ]]></b:skin>

.post img {
text-align:center;
border:3px solid #39F;
-webkit-border-radius:0;
-moz-border-radius:0;
-o-border-radius:0;
border-radius:0;
margin:0 2px 4px 0;
padding:2px;
}

.post img:hover {
text-align:left;
border:3px solid silver;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
border-radius:70px;
-webkit-transition:all .45s ease-out;
-moz-transition:all .45s ease-out;
-o-transition:all .45s ease-out;
transition:all .45s ease-out;
margin:-6px -8px -8px -6px;
padding:1px;
}

• Save your template and You are done.