css-based image gallery: default image?

[mjohnson2]

Re the tutorial on http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

Several people have asked how to have a default image in the blank space before a thumbnail is moused over, but I can't find an answer anywhere. If you know, I need this information asap, with thanks

[rangana]

Just add the image in your markup:


<span id="default"><img src="http://www.dynamicdrive.com/cssexamples/media/horses.jpg" /><br />Run wild with horses.</span>


...and have this CSS:


#default{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: 238px;
border: 1px dashed gray;
color: black;
text-decoration: none;
z-index:40;
top: 8;
visibility:visible;
}
#default img{
border:1px solid blue;
margin: 0 5px 5px 0;
}


Hope that helps.

[mjohnson2]

Thank you for your quick and helpful response. I have added the css code to the style sheet and inserted the html in the page code. The default image is now sitting on top of the rollovers. How can I make it go behind them without using a layer? Much appreciated...