SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict
    Join Date
    Nov 2008
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Help Fixing CSS Image Hover/Product Zoom Code

    Please examine the 3 small product thumbnail images on this page.

    I want to arrange them so they appear in a grid or next to each other in rows as they do on this page. But there's about 50px of spacing on either side of the thumbnail images on this page. How do I get rid of that spacing? I think it's caused by "display: block" but I found that this property necessary, otherwise the hover/pop-up image pop up out of place in the Opera browser...

    What can I do?

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could try making them inline-block instead.

  3. #3
    SitePoint Addict
    Join Date
    Nov 2008
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

    Unfortunately, it didn't get rid of that extra spacing on left and right of the thumbnail images - the spacing is encased within the border.

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to make the width equal to that of the images.

  5. #5
    SitePoint Addict
    Join Date
    Nov 2008
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you!

    That worked - setting widths worked and setting "inline-block" on display property worked.

    But now... when I hover over the one of the thumbnail images on this page, when the pop-up appears, it seems to rearrange the thumbnail images in the background - a little hard to see because the pop-up almost covers the thumbnails once it appears, but not completely.

    Can you see what I'm referring to? Do the little thumbnails get rearranged because they are somehow not stationary? How can I fix this?

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not seeing any popups on that page.

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The problem is that your CSS is resetting the anchors to display:block on hover.

    Remove that rule below

    Code:
    .prodpageimgthumb:hover {
    background-color:transparent;
    display:block;
    z-index:50;
    }

  8. #8
    SitePoint Addict
    Join Date
    Nov 2008
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

  9. #9
    SitePoint Addict
    Join Date
    Nov 2008
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I have another problem - on this page - notice the hover/pop-up product image on the main/top product image appears behind the embedded video when it pops up...

    Can you guys see that? How to I adjust the hover/pop-image so that it pops up over the embedded video?

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Actually, I have another problem - on this page
    What page? I don't see a video on the page link from post#1

  11. #11
    SitePoint Addict
    Join Date
    Nov 2008
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry - I didn't realize the hyperlink wasn't working - it's this page.

    The embedded video shows up directly below the main/largest product image. Do you see it?

  12. #12
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see the video but I don't see any popups, but you probably want to add the wmode=transparent parameter to your video.

  13. #13
    SitePoint Addict
    Join Date
    Nov 2008
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you place your mouse over the main product image at the top, the CSS pop-up doesn't appear?

    May I ask what browser you're using? It's working for me in FF, IE, and Opera. But I think it's not working in Chrome at the moment...

  14. #14
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, no popup. Safari on a Mac.

  15. #15
    SitePoint Addict
    Join Date
    Nov 2008
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

    Well - there's an even more pressing issue.

    How do I fix the CSS pop-up so that it works in Chrome and Safari - it's currently not working in either...

  16. #16
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Changing the z-index to something higher than the video should do the trick:

    IE: z-index: 999;

  17. #17
    SitePoint Addict
    Join Date
    Nov 2008
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That didn't work. The pop-up appears under the video in all browsers.


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
  •