11-16-2010, 03:37 PM
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?
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:
-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);
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.
11-16-2010, 04:44 PM
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.
11-17-2010, 02:19 PM
It would be pretty easy to just use a border to look like a drop shadow. Like this example (http://nopeople.com/CSS/drop_shadow/index.html).
You would need to make the normal state have no color on the border and then color the hovered state.
09-23-2011, 08:26 AM
Thank you very much, your solution and advice worked and helped me!!!