Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
-
Hello,
See my test page here: http://dev.ccdmd.qc.ca/monde/hoverboxTest.html
The problem: The preview image hides UNDER the following image.
(By the way, only the 1st two thumbnails have a hover effect.)
Obviously I want it to hover above anything else on the page. I tried playing with the z-index but to no avail.
I'm mystified. I don't even get why it doesn't hide under the previous image!
Perhaps something to do with positioning?
I'm utterly confused and praying someone might see my problem at first glance.
Thanks for any help!
-webfairy -
-
CommentAuthorkari.patila
- CommentTimeOct 21st 2008 edited
Try adding a z-index into div.imgBox and see if it works. Like z-index:99; or something like that. -
-
Yeah, I tried that. No dice!
*groan* -
-
CommentAuthorkari.patila
- CommentTimeOct 21st 2008
It looks like the image stays under the entire TD or even the nested table. Can you add, say, a z-index of 1 to each of the images and a z-index of 99 to the image you're hovering over? I didn't see a :hover selector and didn't bother to read through the whole file…
You might have to set a position and a z-index for the tables as well. -
-
Hmm.
I started from the outermost container and added a z-index to each containing block all the way to the image inside.
I am assuming that the preview image (the one that appears on hover) should have the highest z-index, right?
Still having problems.
There is indeed a :hover selector. It's div.imgBox a.thumbViewer:hover .preview.
Maybe it's because I have a nested table that is repeated within each table cell and that's what messes up the z-index?
This thought gave me a clue so I tried it with only onc image and added borders to the tables so we can see if it hovers above or under and sure enough, it works fine http://dev.ccdmd.qc.ca/monde/hoverboxTest2.html.
But the moment I introduce another table next to it, some confusing stuff occurs. See http://dev.ccdmd.qc.ca/monde/hoverboxTest3.html
So how can I achieve a whole row of images with this hover effect?
(If you're wondering why I nested tables, it had to do with problems with vertical-alignment. CSS alone is bit inconsistent as far that goes, as you may already know.)
Thx for your time.
1 to 5 of 5