Images on Images using CSS

[Dale DeMott]

I'm looking to achieve the following task. I need to show several pictures on a site. These pictures will be displayed in rows and columns naturally. This meaning that they should lay from left to right. When the pictures reach the end of the row, they go to the next row. Much like a photo album. That part is easy. Here's the part that gets tricky. Each of these photos need to be able to have another smaller image on top of it when you mouse over it. The picture says Click Me. The idea is that this picture has some type of functionality associtated w/it. What I'm looking to do is lay this whole thing out using CSS. No tables. And also I don't want to change the source of the image on mouseover. If I add photos, I don't want to have to create a 2nd image to mouse over. Also this should be layed out using a css layer and display the 2nd image when its moused over.

Here's what I have...

my css

#container
{
width:122px;
position:relative;
}
 
#imageContainer
{
position:absolute;
width:90px;
}
#imageButton
{
position:absolute;
left:6px;
top:97px;
width:90px;
z-index:5000;
}

 
<span id="container">
    <span id="imageContainer"><img src="../images/main.jpg" /></span>
    <span id="imageButton"><img src="../images/button.jsp"/></span>
</span>
<span id="container">
    <span id="imageContainer"><img src="../images/main.jpg" /></span>
    <span id="imageButton"><img src="../images/button.jsp"/></span>
</span>

I've put two of the same picture to see if the images would lay left to right correctly. They just lay on top of each other. I thought absolute would only work w/in the immediate closest div or span tag. When I put absolute in the inner tags to position them, it seems to affect how the outter container is layed out on the page.

TIA

[Eric Pascarello]

Two ways I could think about it would be:

CSS

  div.imageBox{
    width: 74px; 
    height: 87px;
    float: left;
    padding-top: 26px;
    padding-right: 13px;
  }

HTML

<div class="imageBox" style="background-image: url('asdf.gif');">
  <img src="foo.gif">
</div>

OR

CSS

<style>
 
  span.gal img{
    width:100px;
    height:100px;
  }
 
  span.gal img.little{
    position: relative;
    top:-30px;
    left:-50px;
    width: 30px;
    height: 30px;
  }
 
</style>

HTML

<span class="gal">
  <image src="img/FOO1.gif"/>
  <image class="little" src="img/FOO2.gif"/>
</span>

Eric