File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes Images on Images using CSS Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Images on Images using CSS" Watch "Images on Images using CSS" New topic

Images on Images using CSS

Dale DeMott
Ranch Hand

Joined: Nov 02, 2000
Posts: 515
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

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.


By failing to prepare, you are preparing to fail.<br />Benjamin Franklin (1706 - 1790)
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15385
Two ways I could think about it would be:






I agree. Here's the link:
subject: Images on Images using CSS
jQuery in Action, 3rd edition