Need Help Fixing CSS Image Hover/Product Zoom Code

HTML & CSS
1

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 [URL=“http://www.americanchic.net/satchelminicanvasstriped.html”]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

Thanks!

3

The problem is that your CSS is resetting the anchors to display:block on hover. :slight_smile:

Remove that rule below

[B].prodpageimgthumb:hover[/B] {
background-color:transparent;
[COLOR=Red]display:block;[/COLOR]
z-index:50;
}
4

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?

5

You need to make the width equal to that of the images.

6

I’m not seeing any popups on that page.

7

You could try making them inline-block instead.

8

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.

9

Changing the z-index to something higher than the video should do the trick:

IE: z-index: 999;

10

That didn’t work. The pop-up appears under the video in all browsers.

11

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

Yep, no popup. Safari on a Mac.

13

Actually, I have another problem - on this page

What page? I don’t see a video on the page link from post#1

14

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…

15

I see the video but I don’t see any popups, but you probably want to add the wmode=transparent parameter to your video.

16

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…

17

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?