|z-index with link and transparent pic|
I have a transparent pic with a z-index: 2 and a text link with z-index: 1
In the picture, some hair is extending downward out of the header box, and what I want to do is have the text links begin right below the header box, but also have the hair cover tiny parts of the links for effect, hence the z-index. My problem is that the links that are "under" the image, I can't click on them. Does anyone know of a way around this (to be able to click on the links under the image) while preserving what I want to do? Thanks.
- Thi Nguyen
hi thi nguyen. welcome to WebmasterWorld!
i’m not an expert in css, but i think it’s not possible to do what you want. however, this is how i would solve it:
in an image editor crop the hair you want over your text.
put yor text links in a ul inside a div, use your newly created hair image as a background for the div, absolute position your header and your div.
of course, the text would still be over the hair, but i think this is the best way to merge your hair and your text links.
or you could also go to an image editor, crop the hair, and add the text right with the image editor in a layer below the hair, then, crop all the link options and save every link as a new image. just use a div for each image-link and absolute position your header and your image-links.
in this case you would accomplish the effect you want but you wouldn’t have text links, just image links, and maybe that’s not what you want…
hope it helps
Welcome [webmasterworld.com] to WebmasterWorld, Thiman!
The reason that your links do not hover is that the layer with the image is on the top level, so your mouse is actually hovering over the image, as opposed to the links on the div with the lower z-index.
In my opinion, the effort that it would take to achieve this result may not be worth it in the long run. But, that's just my €0.02!
Actually, I managed to find an alternative way to do it that achieves the results I wanted. It's rather simple, really. Before, I had the <img> in a div, so like BlobFisk pointed out, I'm hovering over the image. But if I make the image a background of div, then I'm just hovering over an 'empty' div block. Since the div's z-index is still higher, the background still appears above the text, but at the same time, allowing me to click the links under the transparent parts of the image.
Nice find Thiman - certainly one to remember!
Glad you got it sorted.