help with rollover drop shadow in CSS

[geekygirl]

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?

[SB65]

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:

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.

[teedoff]

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.

[Excavator]

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.

[gabriella28]

Thank you very much, your solution and advice worked and helped me!!!