While in the process of redesigning this site I came across an idea that I thought would be cool, but I found that it had its flaws. What I am talking about is identical to the effect you see on the left side of this page. The effect?

Floating a transparent image over links, yet have the links remain clickable using CSS

First of all this effect requires multiple layers of text that requires some forknowledge of CSS positioning which, if needed I can discuss in a later post.

Here are the steps that I did to make it work.

1) Place your div with the content that you wish to contain links. For me, a WordPress Tag Cloud was used

2) Now place another div with your transparent image directly over the dv you have just created with your links. HINT: Position fixed or absolute.

3)Test this out now. You should not be able to click through to the links. I did notice that firefox can interpret this at times without any problem, but Internet Explorer 7 will not.

4) To resolve this add another div, identical to the one you previously created positioned precisely over the previously created divs. If done perfectly, you should see your links on top of the image, making them fully clickable. This however is not the effect we want, but we only have one more step and we are done!

5)Insert the following transparency code filter into the div you just created in step 4.

 filter:alpha(opacity=0);
 -moz-opacity:.0;
 opacity:.0;

Now it should be working! This is exactly how the effect was done on this site!

Note – You may need to tweak your z-index on these divs, depending on how you declare and position them.

1. cool tricks

   nagakeciks on November 3rd, 2008 at 4:07 am

2. Awesome, Nice bit of problem solving. Just added it to my site!
   Thanks

   Douglas Wilson on February 13th, 2009 at 9:45 pm

3. I have a question tho, How do I add a hover effect to the background link?

   Douglas Wilson on February 14th, 2009 at 3:18 am

4. Sorry in the delay inreplying, but herein lies the problem. The links behind the graphic are not actually a link that the mouse can ever touch. So a hover over those is impossible. You can however change the hover attribute in css for the links on top of the image to not be hidden and text-decoration: underline, if you wanted too.

   Nathan Blazek on February 17th, 2009 at 1:23 am

5. Iv tried doing that, but I just cant seem to get the right code… My links are images by the way..

   Douglas Wilson on February 17th, 2009 at 5:58 am

6. Ok so I’ve changed my links to text… How would I get the hover effect to show up then?
   Ps im a CSS noob, so exact code is required.

   Thanks

   Doug on February 23rd, 2009 at 12:12 am

7. [...] Blazek Web Design – Clickable links through a transparent image in CSS — to achieve clickable RSS button behind the sidebar girl’s backpack strap [...]

   Craisin.com | Craisin.com Revamp - Spring 2009! on April 5th, 2009 at 12:18 am

8. Thank you! I got this to work with the menu at the bottom of a page I’m building. Basically, I have a transparent PNG image that creates a gradient effect over text for the menu at the very bottom of the page. However, this blocked out the links, that is, until I tried this method and now it works.

   There are three layers:
   z-index: 0 – the layers with the text
   z-index 2 – the layer with the transparent gradient
   z-index 3 – the layer with the invisible (but working) links in the exact same spot as the first layer!

   See here for an example:
   Note, the site is still under construction…
   http://www.nightfrightevents.com/test/index.php

   Allen Mackley on May 24th, 2009 at 1:27 pm