Need Quick Help. Images On Top of Images

[grovesk]

Hi – I need help figuring out how to get multiple smaller images on top of a large image, WITHOUT calling the large image with a background url. DIAGRAM

I’m building the HTML and CSS for this area and it will be converted into a slideshow for a CMS. The develoepr does not want the large image as a background because it will swap out on each page.

Any suggestions or good tutorials? I know that position:relative and Z index is going to come into play and that’s new terrority for me complete.

thanks, Karen

[angus]

If your background image had an id of “background,” and you gave ids to all the smaller “thumbnails,” this code should work:

The Markup

The CSS

#slider {

width: 600px; /* The width of your background image */

height: 300px; /* The height of your background image */

position: relative; /* Allow for positioning within the div */

}



#background {

width: 600px; /* The width of your background image */

height: 300px; /* The height of your background image */

position: absolute;

top: 0; left: 0; /* Puts it in the top left corner of #slider */

z-index: 0; /* Puts it below the thumbnails */

}



.thumbnail {

position: absolute; /* Allow thumbnails to be given coordinates inside the #slider div where they should be placed */

height: 40px; /* Height of thumbnails */

width: 40px; /* Width of thumbnails */

z-index: 1; /* Puts them above the backgrounds */

}



#thumbnail-1 { top: 10px; left: 10px; }

#thumbnail-2 { top: 60px; left: 10px; }

#thumbnail-3 { top: 10px; left: 60px; }

#thumbnail-4 { top: 60px; left: 60px; }

Adjust the top and left values for each #thumbnail-n to position each thumbnail. You can also use “bottom” (instead of “top”) or “right” (instead of “left”) to position the element relative to the bottom or right of the #slider div.

[grovesk]

Hi – I tried this but I can’t get the thumbnails to move. They all stay tucked up into the top left corner.

Here’s what I changed

#thumbnail-1 {left: 100px; top: 10px;}

#thumbnail-2 {top: 10px; right: 15px;}

#thumbnail-3 { bottom: 10px; right: 160px; }

#thumbnail-4 { bottom: 60px; left: 260px; }

[angus]

Two problems with the code I posted:

1. First of all, I forgot to put semicolons after all the top attributes for each of the thumbnails.
2. Second of all, I spelled thumbnail wrong in all of the ids.

Just a couple stupid mistakes, the code above is fixed. Your code should work fine.

[grovesk]

Thanks Angus! That did the trick. I’m going to go ahead and build this out today/tomorrow (I have 16 thumbnails in all to do) and I’ll post a link back up so others can see.

Karen

[grovesk]

Do you know if it’s possible to have a hover state on the thumbnails?

The thumbnails will link to different pages and they need to have a hover border, as well as an active page state. I tried a few variations of thumbnail a:hover that didn’t work.

Karen

[whiteInkDesign]

the thumbnail class is on an image, right? If so you’ll see in your code the img tag with the class thumbnail is actually inside the anchor tag, so you would target it with css as-
a img.thumbnail {
}
a:hover img.thumbnail {
}

[grovesk]

Wow…that worked like a charm. Thank you!

[Author]

Posts