Whats the best way to add a shadow image to multiple images?

Hi there, I’ll jump right to the code then write below what I want to do…


div#content {
	width: 900px;
	margin: 0 auto;
}
div#content img {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	background-color: #FFF;
	border: 1px solid #666;
	padding: 10px;
}
div#work {
	background: url(heading_work.png) no-repeat;
	width: 100px;
 	height: 25px;
 	margin: 20px auto;
}


<div id="content">
<div id="work"></div>
<a href=""><img src="icon.png" alt="" width="264" height="198" /></a>
<a href=""><img src="icon.png" alt="" width="264" height="198" /></a>
<a href=""><img src="icon.png" alt="" width="264" height="198" /></a>
<div class="clear"></div>
</div>

In the HTML code, I’m gonna have more images… so 3 in each row, probably 3 more rows, anyways, as it sits I like it but I want to add a shadow to the bottom of each image. What would be the best way to go about adding one to each image. Thanks for any help.

You can give the images a “box-shadow” (Internet Explorer: IE9+; other browsers: no problem), for instance:

div#content img {
   ...
   box-shadow: 3px 3px 3px #C0C0C0;
}

See for more about the box-shadow property: [U]www.css3.info/preview/box-shadow[/U], or [URL=“http://css3generator.com/”][U]css3generator.com[/U], or [URL=“https://www.google.nl/search?q=css3+box-shadow”][U]Google box-shadow[/U]. :slight_smile:

lol, CSS3 makes it so easy. What would be the alternative if I wasn’t using css3?

Put a <div> around each anchor and put a background image of the shadow in that div. Assuming you provide user feedback by coloring the image borders (or outlining the image), the anchor coloring will remain around the image and not outside of the shadow.

This is a very old demo (about 10 years old) but shows how to use a transparent image around an image and will work back to IE6.

As mentioned above you just add an element around the image (if there’s nothing else suitable) and apply the shadow to that element. You can make space with padding or just shift the image over the background with negative margins.

If your image doesn’t have a border then you could add 10px padding to the image and apply a background image to the image itself without the need for an extra container.

Hey thanks for your help, what do you think about this… It works for me but I just want to make sure the code looks good… I wrapped the images with divs and I just set a width and a height to that div then positioned the shadow to the bottom.


#content { width: 900px; height: 480px; margin: 0 auto; border: 1px solid #90F; }

#gallery { }

#gallery .shadow {
	width: 290px;
	height: 230px;
	background: url(thumbnail_shadow.png) bottom no-repeat;
	float: left;
	margin-right: 10px;
}
#gallery img { background-color: #FFF; padding: 10px; border: 1px solid #666; }


	<div id="content">
    	<div id="gallery">
            <div class="shadow"><img src="thumb.png" width="264" height="198" /></div>
            <div class="shadow"><img src="thumb.png" width="264" height="198" /></div>
            <div class="shadow"><img src="thumb.png" width="264" height="198" /></div>

            <div style="clear:both;"></div>

	    <div class="shadow"><img src="thumb.png" width="264" height="198" /></div>
            <div class="shadow"><img src="thumb.png" width="264" height="198" /></div>
            <div class="shadow"><img src="thumb.png" width="264" height="198" /></div>

            <div style="clear:both;"></div>

        </div>
    </div>

Thanks again for both your help.

The code doesn’t make sense to me. And where did the anchors go? What is your objective?

Please click on the link at the bottom of my post and read the part about posting your code as a working page from doctype to </html>. That way, we should be able to see exactly what you see. You might mention the browser(s) in which you are viewing the samle, too.

I could throw something up that would work, but I’d prefer that you take the lead and present your needs a bit more clearly.

Thanks :slight_smile:

What happened was I created a new page and forgot to add the links to the images, here’s the entire page… I thought it would be easier to just post the css and the html section that I needed help on but I believe I’m using the latest version of Firefox… Anyways, I want to be able to have this look almost identical on IE browsers, maybe 6 +… As for the shadow, is that way practical? Thanks


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<style type="text/css">
* { margin: 0; padding: 0; }

body { background: url(background.png) repeat; }

#content { width: 900px; height: 480px; margin: 0 auto; border: 1px solid #90F; }

#gallery { position: relative; top: 20px; left: 6px; }

#gallery .shadow { 
	width: 290px; 
	height: 230px; 
	background: url(thumbnail_shadow.png) bottom no-repeat; 
	float: left; 
	margin-right: 10px; 
}
#gallery img { background-color: #FFF; padding: 10px; border: 1px solid #666; }
</style>
</head>

<body>
	<div id="content">
    	<div id="gallery">
            <div class="shadow"><a href=""><img src="icon_discourse_thumb.png" width="264" height="198" /></a></div>
            <div class="shadow"><a href=""><img src="icon_discourse_thumb.png" width="264" height="198" /></a></div>
            <div class="shadow"><a href=""><img src="icon_discourse_thumb.png" width="264" height="198" /></a></div>
            
            <div style="clear:both;"></div>

            <div class="shadow"><a href=""><img src="icon_discourse_thumb.png" width="264" height="198" /></a></div>
            <div class="shadow"><a href=""><img src="icon_discourse_thumb.png" width="264" height="198" /></a></div>
            <div class="shadow"><a href=""><img src="icon_discourse_thumb.png" width="264" height="198" /></a></div>
            
            <div style="clear:both;"></div>

        </div>
    </div>
</body>
</html>

Which of these images more closely reflects the layout that you wish?

I would like to suggest that you reconsider how seriously you want to support IE6 and 7. They are not even on the charts any more. Far more attention is being given to fluid and responsive sites these days because that is where the customers are.

Yea I guess your right about that. The shadow I have will just be at the bottom of the div it wont wrap around the sides. Thanks for your help.

Your last post sounds like you are finished asking questions here.
Nevertheless… Shadow at the bottom:

A suggestion for the future (wherever you may go for assistance)… when you post a request for help, post a working page that should render the same in the helper-bee’s browser as it renders in yours. In this case, without your images or a screen shot showing how your code looks in your browser, we can only guess based on what you say you want (and most descriptions are notoriously incomplete :slight_smile: ).

The following is a screen shot of how your posted code renders on my PC in FF (just so you understand that one can only guess at how you intend for it to look).

BTW - This is a good test to see how the page would look if an image or all images cannot be found on the server, or if the user has images turned off.

Thanks… well I still wanted to know if my CSS code looked correct for adding the shadow at the bottom. Anyways, about providing a working page… I’ll definitely have one next time, I tried to be most descriptive as possible, sorry about that.

Yes, that is the right place for the boxShadow image. Go for it. :slight_smile:

Based on your code, give this a try:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!--
http://www.sitepoint.com/forums/showthread.php?1173683-Whats-the-best-way-to-add-a-shadow-image-to-multiple-images
Thread: Whats the best way to add a shadow image to multiple images?
Oct 18, 2013, 20:00
jlisec01
-->
    <title>image with shadow</title>
    <style type="text/css">
body {                /* The universal selector * is not recommended */
    padding:0;
    margin:0;
}
#content {
    text-align:center;
    border:1px solid #90F;
    margin:0 auto;
}
#gallery {
    display:inline-block;
    vertical-align:top;
    *display:inline;   /* ie7 and under inline-block hack */
    *zoom:1.0;         /* "  " */
    overflow:hidden;
}
#gallery .shadow {
    float:left; 
    background:url("thumbnail_shadow.png") 50% 100% no-repeat;
    padding-bottom:10px;
    margin:0 5px; 
}
#gallery a {
    display:block;
}
#gallery img {
    display:block;
    background-color:#FFF;
    border:1px solid #666;
    padding:10px;
}
    </style>
</head>
<body>

<div id="content">
    <div id="gallery">
        <div class="shadow"><a href="#"><img src="http://placehold.it/264x198/bdf" alt="" width="264" height="198"/></a></div>
        <div class="shadow"><a href="#"><img src="http://placehold.it/264x198/bdf" alt="" width="264" height="198"/></a></div>
        <div class="shadow"><a href="#"><img src="http://placehold.it/264x198/bdf" alt="" width="264" height="198"/></a></div>
        <div style="clear:both;"></div>
        <div class="shadow"><a href="#"><img src="http://placehold.it/264x198/bdf" alt="" width="264" height="198"/></a></div>
        <div class="shadow"><a href="#"><img src="http://placehold.it/264x198/bdf" alt="" width="264" height="198"/></a></div>
        <div class="shadow"><a href="#"><img src="http://placehold.it/264x198/bdf" alt="" width="264" height="198"/></a></div>
    </div>
</div>

</body>
</html>