Win a copy of Mesos in Action this week in the Cloud/Virtualizaton forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Images on Images using CSS

 
Dale DeMott
Ranch Hand
Posts: 515
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.

TIA
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Two ways I could think about it would be:

CSS


HTML



OR

CSS


HTML


Eric
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic