Add a Hover Effect in Images at Post

Every image should have a hover effect in the blogger be'coz it always gives the very valuable effect to every blogger. As you can see in the image of this tutorial you can easily change the image hover color by just replacing the simple hex color code. you can easily make it as your favorite color also can make it which is similar to your theme color. 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.

Add Hover Effect in Images

• 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 {
padding: 8px;
background: #ffffff;
border: 1px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.post img:hover {
background:#FDFDFB;
border:1px solid #8DDCEF;
-moz-box-shadow:0 0 10px 2px #0066B3;
-webkit-box-shadow:0 0 10px 4px #0066B3;
box-shadow:0 0 10px 4px #0066B3;
}

• Save your template and You are done.