SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overlapping 5 Images With Mouseover Effect

    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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Something like this?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  5. #5
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I can't really see due to me not having images, could you just switch up the order of the images in the HTML?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    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. #9
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys! Is there an easy-to-follow explanation of z-indexes somewhere that you recommend I can read?

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Briefly skimmed over it and it seems to contain all the important parts .

    http://coding.smashingmagazine.com/2...ehensive-look/
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool... thanks! I will play around and figure this out. I do appreciate all the help!

    Doug

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  16. #16
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  18. #18
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked perfect! Thank-you again!

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

    Much appreciated,

    Doug


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •