Overlapping 5 Images With Mouseover Effect

**DougD** · Mar 29, 2012 18:57

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

**RyanReese** · Mar 29, 2012 19:13

Something like this?

**DougD** · Mar 29, 2012 19:20

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?

**dresden_phoenix** · Mar 29, 2012 19:23

Code:

<!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.

**DougD** · Mar 29, 2012 19:36

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

**DougD** · Mar 29, 2012 19:45

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!

**RyanReese** · Mar 29, 2012 19:50

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

**TehYoyo** · Mar 29, 2012 19:56

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

**DougD** · Mar 29, 2012 19:59

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.

**RyanReese** · Mar 29, 2012 20:01

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.

**DougD** · Mar 29, 2012 20:07

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

**RyanReese** · Mar 29, 2012 20:14

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

.

http://coding.smashingmagazine.com/2...ehensive-look/

**DougD** · Mar 29, 2012 20:16

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

Doug

**RyanReese** · Mar 29, 2012 20:17

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

.

**dresden_phoenix** · Mar 29, 2012 20:39

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:

Code:

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

**DougD** · Mar 29, 2012 20:47

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

**RyanReese** · Mar 29, 2012 20:54

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.

**DougD** · Mar 29, 2012 20:57

That worked perfect! Thank-you again!

http://www.sitejr.com/overlap/

Much appreciated,

Doug

User Tag List

Thread: Overlapping 5 Images With Mouseover Effect

Thread Tools

Display

Overlapping 5 Images With Mouseover Effect

Bookmarks

Bookmarks

Posting Permissions