Add On Hover Drop Shadow Effect To Images In Blogger

Blogger has given us full rights to customize our template in our own way until we break the Google’s Terms & Conditions. So you can easily customize your blog design with the special effects and beautiful design which will attract your visitors more to revisit your site. So today I am going to  explain how to display on hover drop shadow effect to images in blogger.

How To Add On Hover Drop Shadow Effect To Images In Blogger

Step 1 : Login to Your Blogger Dashboard.
Step 2 : Select your blog in which you want to apply this effect in case you have multiple blogs.
Step 3 : Then Navigate To “Template” Section –-> Click on “Edit HTML”.
Step 4 : Then find for the below code in your template using Ctrl + F.

 ]]></b:skin>

Step 5 : Then copy the below given code right above or before ]]></b:skin>.

.dgtltrks-drpshdw {
padding: 5px;
border: solid 1px #EFEFEF;
}
a:hover img.dgtltrks-drpshdw {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}

Step 6 : Save your Template.
After you have done applying the CSS part, now the next step is to Edit your post editor in your blogger template.
Step 1 : Switch to HTML mode of your post.
Step 2 : And place the below class code and add it after <img tag in your post.

class=”dgtltrks-drpshdw”

For more details see the screen shot given below.

Well after reading and applying this code to your template and post editor it will make your image On Hover drop shadow effect to your images. So if you enjoyed our post let me know and kindly take a second to share it with your friends.