I was wondering if this is possible, and if so… does anyone know how to do it?
I would like to take 6 (not 5) mobile phone images (around 225x400px each) and overlap them left to right (like spreading out a deck of cards) in an 800px width area… and when someone mouses over each phone the full version of the phone appears on top.
Sorta. I need the images to overlap. The image below is one image. I was wondering if I could use the individual phone images and have them overlap and have the mouseover effect?
Ah, yeah I did know he meant that but for some reason I misspoke.
Unless you wanted to add a bit of HTML, the easiest solution would just be to manually do z-indexes IMO :). Although if you’re talking about a dynamic number of images, the z-index trick might be a bit too much.
You’re welcome :). We are here to help. If you have any questions after reading the article, feel free to post here in this thread. I’m on these forums constantly :).
By default the stacking order is from first element to last element. this means the element on the left will appear to be the bottom of the deck. You could force the issue with this:
Sorry… now I am more confused. Do I add that to the code you created above? I apologize for being an idiot, but I am just learning this more advanced css stuff (at least it is to me) and it is giving me a major headache. It is very interesting though.
Yes you can do that. Or assign a class to each image and manually set the z-index…6…5…4…3…2…1 etc. You can copy paste the above code to make it work. His requires no changing of HTML.