Dim or shadow an IMG?

<img src=“whatever.jpg” alt=“sample” />

Is there a way to ‘dim’ or shadow an image without manipulate the graphic file itself?

I’m getting the small profile pictures of my friends from a simple Facebook app, you see.

What I want to do is ‘dim’ or darken a select few of these small pics hence highlighting the remaing photos.

I just don’t know what to do.


Probably to get it cross-browser you would need to manipulate the image or use some absolute position trickery. Ultimately you will need to manipulate either the original image to add dimming, or create an image and put the dimmed effect there and place it there.

I’ll get in a bit more detail if either of those seem like an option to you.


If you are “selecting” images you will need JS to actually select them, and then you could apply dimming there, only if you want that behavior sort of thing though :). I am not quite sure what you want exactly

you could do do this…
<div style=“background:url(your-image.jpg);float:left;”><img src=“” width=“118” height=“118” style=“display:block;background:#000;opacity:.7;”></div>

or do the same type of thing with a div and a span instead (div position relative and span position absolute), or just make the image itself transparent instead of darkening it.


Here’s an old example using opacity as mentioned above.

I just grabbed that example code from some hide image code I had lying around. At second thought, I would do away with the image and relative/absolute positioning (I didn’t look, but probably the same thing you have Paul), but rather I’d do it like so…

<div style=“background:url(your-image.jpg);float:left;”><span style=“display:block;height:100px;background:#000;opacity:.7;”></span></div>

the span being is the same height/width as your image.