Add Drop Shadow Effect On hover To Images In Blogger

Add drop shadow to your images in blogger. Blogger made us to customize images on our own way. So you can easily customize adding special effects to your images in blogger. Blogger gave us full rights to edit our template unless you break google terms and conditions. So today let me explain how to display on hover drop shadow effect to images in blogger.


  1. Login into Blogger
  2. Select your blog if you have many
  3. Then migrate to TEMPLATE –> Click on “EDIT HTML
  4. Then find for ]]>
  5. Then copy the below code and paste above it / before it..
  6. Then click on save template .

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


Now in your post editor, after uploading your image, switch to HTML mode and find for you image code. You can search for <img  tag. And place a class code after opening image tag. See the example below.

Code to add drop shadow to image in blogger


The above shown is a piece of code that would make your image to give a shadow effect on hover. So if you enjoyed our post, then kindly take a minute to share it.

Article By Tharun

Hey! Tharun here. A Blogger makes blogging on wordpress tips, blogger tricks, SEO tricks, Android Apps, He love to share what he knows. Meet him at Facebook, Twitter. Get free Wordpress Installation Service Contact Here.


Leave a Reply

Your email address will not be published. Required fields are marked *