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.

LIVE DEMO SEE IMAGE BELOW

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.

class=”imagedropshadow_BB”

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.

- by Computer Hoax