Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    help with rollover drop shadow in CSS

    I'm trying to get a drop shadow on an image but only when I roll over it. I didn't want to have to do the whole adding a second image with a drop shadow from photoshop thing. I read up on tutorials about adding drop shadows in just CSS but I'm no expert and therefore I'm not sure how I would implement that into just a roll over effect. Any ideas?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The css property is box-shadow. It's a bit messy adding it in css, because a number of browsers support it only with browser specific extensions.
    So, to add it on hover:

    Code:
    img:hover {
    -moz-box-shadow:3px 3px 3px rgba(0,0,0,0.7);
    -webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.7);
    box-shadow:3px 3px 3px rgba(0,0,0,0.7);
    }
    So the first line sorts FF3, the second Chrome and Safari, and the fourth Opera 10.6+ and IE9. You'll spot the missing browser there, IE8 and under, which don't support it via css, although there are some javascript options.

    I should add that this is setting a 3px horizontal offset, a 3px vertical offset, a 3px blur distance, a black colour - rgba(0,0,0) - and 0.7 opacity. I used this as I think it's a nice effect. Obviously you can change to what you want.
    Last edited by SB65; 11-16-2010 at 06:07 PM.

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Is this a square image? If so you could wrap it in a div, set a dark color to the div and then give it offset margins to give the appreance of a drop shadow.

    Didnt see the rollover requirements...lol but still could be done I would think using hover.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello geekygirl,
    It would be pretty easy to just use a border to look like a drop shadow. Like this example.
    You would need to make the normal state have no color on the border and then color the hovered state.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much, your solution and advice worked and helped me!!!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •