homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

z-index with link and transparent pic

 10:23 am on Apr 19, 2003 (gmt 0)

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



 12:54 pm on Apr 19, 2003 (gmt 0)

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


 12:49 pm on Apr 22, 2003 (gmt 0)

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!


 3:53 pm on Apr 22, 2003 (gmt 0)

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.


 3:54 pm on Apr 22, 2003 (gmt 0)

Nice find Thiman - certainly one to remember!

Glad you got it sorted.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved