Last week, we had the author of TDD for a Shopping Website LiveProject. Friday at 11am Ranch time, Steven Solomon will be hosting a live TDD session just for us. See for the agenda and registration link
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Jeanne Boyarsky
  • Tim Cooke
Sheriffs:
  • Liutauras Vilda
  • paul wheaton
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Stephan van Hulst
  • Carey Brown
  • Frits Walraven
Bartenders:
  • Piet Souris
  • Himai Minh

Images on Images using CSS

 
Ranch Hand
Posts: 515
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Two ways I could think about it would be:

CSS


HTML



OR

CSS


HTML


Eric
 
What kind of corn soldier are you? And don't say "kernel" - that's only for this tiny ad:
Free, earth friendly heat - from the CodeRanch trailboss
https://www.kickstarter.com/projects/paulwheaton/free-heat
reply
    Bookmark Topic Watch Topic
  • New Topic