Latest On BB :
Home » Blogger Tips » Add Drop Shadow Effect On hover To Images In Blogger

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;
}

ALSO READ :  CHANGE HEADING STYLE IN BLOGGER

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

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.

About 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.

2 comments

  1. woa bro..you are using Savida template..its really awesome.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge

Subscribe to Get More Interesting Posts Straight to Your Inbox

Get Mind Blowing Content & Offers at Your Inbox

Give us your best email ID, Your Name and click on 'Subscribe Now"

We Promise Not to Share your Emails with Others