Add Drop Shadows to Images and Expand them on Mouse Hover


Image-Drop-Shadows CSS is a fun thing to play with. With the growing development of cascading style sheet and with the accepting compatibility of new browsers, web designing is becoming more and more creative. We once used Photoshop to manually add drop shadows to images but now thanks to CSS3 you can add drop shadows to all your images automatically. We will learn today how to minimize the size of large images and how can we make them expand to their original size on mouse hover. I am sure you will love it :)

Please see a demo first,

Live Demo

 

How To add Drop Shadows and Enlarge Images on Mouse Hover?

The methods are really simple.

  1. Go to Blogger > Design > Edit HTML
  2. Back up your template
  3. Search for ]]></b:skin>
  4. Just above ]]></b:skin> paste the following code,

.MBT-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}

.MBT-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

 

If you wish to further decrease the image size then decrease 0.7 or if you wish to further fade the image then decrease 0.5

You are almost done. Now when ever you want the image to appear with this effect, simply use this code,

<div class="MBT-CSS3">
<img src="Image URL Goes Here" />
</div>

 

Upload your image to Blogger editor and replace Image URL Goes Here with your image link. You are done. Now visit your blog to see the effect working in action and yell out Bravo! :P

If you wish to add this effect to another image just keep on adding <img src="Image URL Goes Here" /> before </div>

This effect is compatible with latest versions of Mozilla, Safari, Opera, Chrome and as usual not that effective with boring IE. I just hope you liked it.

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

33 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Gosh, CSS is always impressing me ;o

    ReplyDelete
  2. Awesome

    I will definitely going to use this in my new Blog.

    ReplyDelete
  3. o my god
    are you paid by my teachers to make me mad?????
    i don't know that it is so easier oh my god i can't believe it.
    no scripts???????????
    when i read this article in my mobile(no electricity)i can't myself to see the demo and when light come
    i use it and apply to my blog.........
    happy now

    ReplyDelete
  4. i want to download your cute box template please send me a link

    ReplyDelete
  5. @ajani kumar soni
    Here is the link to Cute Box Template :)
    http://www.mybloggertricks.com/2009/12/releasing-two-column-blogger-template.html

    Samsexy98

    ReplyDelete
  6. I am really glad to know you all liked it. :)

    @Anjani

    Thanks pal for all the love. Could you kindly email me your ID so that I could send you a copy.

    @Sam
    Thanks for helping other readers. :)

    ReplyDelete
  7. my email is anjanisoni123@gmail.com

    ReplyDelete
  8. @Anjani
    Template sent! Check your inbox please :a

    ReplyDelete
  9. Here is a back to top script that will get larger on hover for your blog as a gift for your awesome tutorials:

    https://sites.google.com/site/anims101/downloads/go_to_top.html?attredirects=0&d=1

    ReplyDelete
  10. @Woozgulf

    Thanks you pal! A pleasure indeed :)

    ReplyDelete
  11. this is really cool

    I add it to my site www.Leechermods.com

    ReplyDelete
  12. I wanted to use this super cool effect with my contact icons so I added an HTML widget with your code. I realized that expanding image class should go outside the "b:skin" tag, in order to work in a widget. Then I wrapped it in a new "style" tag right above "/head".
    Unfortunately I can't have my icons arranged as I wish (closely floated on the left): I tried to play with borders, margins, padding, floating, and everything I could think about (I'm not an expert coder) but my icons seem not to acknowledge my effort.
    Actually my html works perfectly in a sandbox, but something goes wrong when I put it in a Blogger HTML widget. Any idea please? Thanx.

    ReplyDelete
  13. @Art

    dude the CSS code is always added above /b:skin tag and even if you enclose it between style tags it makes no difference.

    What you have to do is that if your wish to add this effect to an HTML/JAvaScript widget then first paste the CSS code inside your template (The first code as guided above) and for the HTML part do this,

    1) Inside HTML/JavaScript widget enclose every single Icon between this code,

    <div class="MBT-CSS3">
    <img src="Image URL Of Your Icon#1" />
    </div>

    To add this effect to another icon simply keep on adding this code

    <div class="MBT-CSS3">
    <img src="Image URL Of Your Icon#2" />
    </div>


    Kindly make sure to replace Image URL Of Your Icon#1 and Image URL Of Your Icon#2 with your Icon link.

    If you needed further assistance please let me know.

    ReplyDelete
  14. The effect actually works perfectly by putting the CSS code either in the template, or inside the widget (between "style" tags). I put it in the widget for an easier editing and troubleshooting.

    If you kindly take a look at my blog (ilsolitoblog.blogspot.com), you'll see the icons on the upper right. My issue is that there's too much space around them: they're not close to each other, with little padding around.

    I can't work out a way to arrange them as I wish: changing padding, margin or float values seems not to produce any effect at all. Do I have to add an extra class with the desired parameters? DO I have to use different properties? Thanks for your help.

    ReplyDelete
  15. @Art

    So sorry for my late reply pal. Did you edited margin: 0 10px 5px 0 ?

    ReplyDelete
  16. Don't worry. I'm glad if you find some time to reply, it does't matter when :)

    Yes, I did. I tried all sort of values. As I mentioned, I added padding and float properties, and played around with their values. Nothing changed at all. Margin values work perfectly when I use the code in a sandbox like cssdesk.com but it looks like either blogger just neglects them or I'm doing it really wrong somehow. Any clue?
    Thanks so much.

    ReplyDelete
  17. @Art

    Please take the screenshot and I will make sure you receive the solution in my next reply.
    I visited your blog twice and found nothing there. Guess you have removed the images?

    ReplyDelete
  18. I didn't remove the icons. They are on the top right column as you can see in this screenshot:
    http://i55.tinypic.com/1zf0f1i.png

    I tried out the code in a sandbox and it worked perfecly:
    http://i54.tinypic.com/muhgur.png

    ReplyDelete
  19. used this effect in all my blog posts
    BUT....................
    only works in google chrome
    not mozzila
    seriously .......no mozilla

    ReplyDelete
  20. Mozilla will support image transform from version 4.0

    ReplyDelete
  21. Mohammad, this is awesome!

    (Just only question:
    where do I have to put the second part of the code, which is with URL of picture?
    I put it after the main code AND in my post).

    ReplyDelete
  22. @mon
    You can put it any where you want the image to appear but add it in HTML mode only not the compose mode.
    You are always welcomed. :>

    ReplyDelete
  23. if i have a pic that upload to blogger, where can i find the link to it ?

    ReplyDelete
  24. awasum bro workinggggggg thxxxxxxxxxxxxxxxx

    http://allmytutorials.blogspot.com/

    ReplyDelete
  25. hi,
    i love it
    but i just want to know weather it is possible lo have different colors of drop shadows in each post of my like
    suppose in post i want red
    in next post i want yellow to match the image
    but the previous post color should not change.
    plz reply me soon

    ReplyDelete
  26. i hope u understood my question
    if there is any code plz provide me
    it will be very help full for me

    ReplyDelete
  27. I have tried my best but nothing gonna happen what to do kindly reply as soon as possible :)

    ReplyDelete
  28. How To Use This Effect With Previously Uploaded Images...I I Have A Lot Of Images, Changing The Tag One By One Takes So Many Day......

    ReplyDelete
  29. Hello Mohammad. Thanks in advance. What I´ve learned here was awesome!
    Now, I must make a comment about something you wrote at the end... about not working so well with the boring IE... LOL! You are so right about that, boring.... Thanks again, it was fun!

    ReplyDelete
  30. Thank You Very Much, But is there any code to add the effect automatically to all images.
    PR-Blogger

    ReplyDelete
  31. how to change read more with an image.......it will be good if i can get like yours......

    ReplyDelete
  32. Hi How to get Expanding i mean stream ads to blogger

    ReplyDelete