Overlapping 5 Images With Mouseover Effect

HTML & CSS
1

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.

Can this be done?

Thanks a bunch in advance…

Doug

2

Something like this?

1 Like
3

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?

4 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
.deck {overflow:hidden}
.deck img {position:relative; float:left;  width:225px; height:400px}
.deck img + img {margin-left: -200px;}
.deck img:hover {z-index:9999; border:1px solid red; background: pink}		</style>
	</head>
	<body>
<div class="deck">
	<img src="#" alt="testimage">
	<img src="#" alt="testimage">
	<img src="#" alt="testimage">
	<img src="#" alt="testimage">
	<img src="#" alt="testimage">
	<img src="#" alt="testimage">
</div>
	</body>
</html>

You will need to do the math to that the overlap causes the images to total 800px, but this should be the effect you were after.

5

WOW!!! THAT IS AWESOME!!! THANK-YOU SO MUCH!!! PERFECT!!!

Changed background color to transparent, and got rid of border and it is BEAUTIFUL. Exactly what I needed.

I really appreciate the help!

Doug

6

Can I ask one more question? How do I get the image on the left to be on top and instead of being on the bottom in the default setting?

Thanks again!

7

I can’t really see due to me not having images, could you just switch up the order of the images in the HTML?

8

I think what he means is that he wants the images to descend LTR in layer-ness (if you get what I’m saying).

You could define individual z-indexes for them (a bit of work, but nothing that you can’t take care of, I’m sure.)

~TehYoyo

9

Here it is in action http://www.sitejr.com/overlap/

I could switch the order, but it would look better with the image on the left on top.

10

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.

11

Thanks guys! Is there an easy-to-follow explanation of z-indexes somewhere that you recommend I can read?

12

Briefly skimmed over it and it seems to contain all the important parts :).

13

Cool… thanks! I will play around and figure this out. I do appreciate all the help!

Doug

14

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 :).

15

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:


.deck img {z-index:6;}
.deck img + img{z-index:5; }
.deck img + img+ img{z-index:4; }
.deck img + img+ img+ img{z-index:3; }
.deck img + img+ img+ img+ img {z-index:2; }
.deck img + img+ img+ img+ img +img {z-index:1; }

doesn’t seem very graceful, but it works.

16

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.

Thanks,

Doug

17

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.

18

That worked perfect! Thank-you again!

Much appreciated,

Doug