How can I make "drop shadow" effect for a picture using css?

I want to build an online photography portfolio and the main scenario looks like this: I want a brick wall as a background for my web page and the images on that wall, but with a drop shadow effect. When the visitor clicks a thumbnail, the photo can be seen at a higher resolution, but also with drop-shadow effect.

Can I make this using pure CSS %26amp; XHTML? I don't want to use flash or something. I know how to do all other stuff (gallery, comments system, administration panel - i'm using php,mysql in background because I'll add pictures from time to time, it's more like a dynamic gallery with comments, etc), but I don't know how to make that effect.



Important things:

- it's a dynamic gallery, pictures will be changed/added/deleted in time, so a %26quot;per-photo%26quot; solution it's not what i'm seeking;

- photos will have different resolutions (some smaller, some huge maybe), so i can't afford to do something semi-static.



PS. I'm opened to any other kind of possible solutions except flash.How can I make %26quot;drop shadow%26quot; effect for a picture using css?
Here is a link to a page I did that contains all of the CSS definitions on the page. It makes a picture look like an instant photo.



http://www.norgeskiclub.com/album/item_d



I hope that this helps.How can I make %26quot;drop shadow%26quot; effect for a picture using css?
Yea it is almost 100% possible with css.

I hope your fluint in css.

What you need to is this::

%26lt;style type=%26quot;text/css%26quot;%26gt;

largepic {

position: absolute;

left: 0;

top: 0;

filter:shadow(color=ff0000, direction=90);

display: none;

}

bigimg {

margin: 0px;

padding: 0px;

border: none;

}

%26lt;/style%26gt;

%26lt;script type=%26quot;text/javascript%26quot;%26gt;

Popup = document.getElementById(%26quot;largepic%26quot;);

function Show(src)

{

document.getElementById(%26quot;bigimg%26quot;).src = src;

x = event.clientX + document.body.scrollLeft;

y = event.clientY + document.body.scrollTop;

Popup.style.display=%26quot;block%26quot;;

Popup.style.left = x;

Popup.style.top = y;



}

function Hide()

{

Popup.style.display=%26quot;none%26quot;;

}

%26lt;/script%26gt;

%26lt;div id=%26quot;largepic%26quot;%26gt;%26lt;img id=%26quot;bigim%26quot;%26gt;%26lt;/img%26gt;%26lt;/div%26gt;



then for the imgs that will be made bigger use:



%26lt;img src=%26quot;imgsrc.gif%26quot; onmouseover=%26quot;show(this.src)%26quot; onmouseout=%26quot;hide()%26quot;%26gt;