Image Hover Shadow Effect With CSS

I'm sure you would have noticed the images that appear as a thumbnail on my blog have shadow effect. If not, hover your mouse over the image to the left. Interesting effect. Right? You can find this effect on blogs like Techiemania and other blogs run on WordPress Thesis Theme. Interested to have this effect on your blog?

I'm sure many webmasters would have installed this hack on their blogs long before but few newbies kept mailing me regarding this hack. So, to all those who asked for this hack, here it is. You may also consider reading this article if you wish to have captions on your images on hovering your mouse - Add Image Caption On Hover With CSS3. Let's get started with this tutorial - Image Hover Shadow Effect.

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Place the following piece of code just above the line mentioned in step 1.

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

3. Save your template. Now, navigate to your post editor. To make this hack really working, you need to follow these steps.

1. Insert a picture in your post using the post editor.

2. Shift your tab from the Compose mode to Edit HTML mode.

3. Look for the img tag.

4. Place the following code just after the img tag with a space. Then, publish your post.

class="imagedropshadow"

If you find the above steps difficult to understand, then have a look at the following example. The final coding should be something like this.

POSSIBLE CUSTOMIZATIONS:

You can change the color of the text shadows by changing the numbers highlighted in green on the code mentioned in step 2. Those numbers represent the HTML color codes. The following link may be useful in identifying the HTML color codes for you - HTML Color Names. The border thickness may also be varied by increasing from 1px(highlighted in orange) to the value you want. Even the color could be changed. I think it's pretty self-explanatory.

I hope you enjoyed this hack. If you have any difficulties in installing this hack on your blog, you can always reach me via email. Share your opinions via comments. See you soon with another interesting hack!!!

Enjoyed the article?

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Other Recommended Posts

Mobile Themes World said on June 6, 2011 at 5:30 AM :

That's a nice trick and thanks for sharing.

Mukund said on June 6, 2011 at 10:46 AM :

@Mobile Themes World: Thanks for the comment buddy! I hope you enjoy the upcoming articles on my blog as well!

Amit said on June 7, 2011 at 7:34 PM :

The power of CSS3! I doubt this effect will render in IE. But, I use blogger's official read more feature. How do I create thumbnails? I think you have used javascript to get thumbnails. Can you share the code?

Mukund said on June 7, 2011 at 10:37 PM :

@Amit: Yes! You are absolutely right but we need not worry about IE too much because many have migrated to Chrome. Moreover, IE9 will support CSS3. So, we can realize this effect in IE too! May be wait for few months!!! Regarding the thumbnails, I just use manual hack for the read more feature. The default jump break icon that is available in the post editor. No jQuery nor JavaScripts!!!

Beben Koben said on July 23, 2011 at 5:46 PM :

i thin'k like this...
.imagedropshadow {
padding: 5px;
border: solid 1px #EFEFEF;
cursor: pointer;
}
img.imagedropshadow:hover {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}
a <=- this is for link url not image!
nice trick ☺

Mukund said on July 23, 2011 at 5:52 PM :

@Beben Koben: Your right! I updated the code! But, the earlier code will also work because when you post an image on blogger using the post editor it automatically links it with a URL, so, it'll work on blogger! Anyway, thanks for the comment! Well, correct the other codes on my blog as well, if you any:)

Mike said on August 9, 2011 at 7:25 AM :

You can have a shadow effect in IE8 and below, see -

http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm

Mukund said on August 11, 2011 at 11:08 AM :

@Mike: Yes! You are right! The recent versions of IE8 allows shadow effect! Thanks for the comment Mike!

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT