Comments on: Clickable links through a transparent image in CSS http://www.blazekwebdesign.com/bwd/2008/10/19/clickable-links-through-a-transparent-image-in-css/ A web design and development site that updates the web community with strategies and techniques related to all things web (css, html, asp, php, etc) Thu, 08 Jul 2010 04:37:15 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: Allen Mackley http://www.blazekwebdesign.com/bwd/2008/10/19/clickable-links-through-a-transparent-image-in-css/comment-page-1/#comment-1829 Allen Mackley Sun, 24 May 2009 18:27:24 +0000 http://blazekwebdesign.com/bwd/?p=89#comment-1829 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 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

]]> By: Craisin.com | Craisin.com Revamp - Spring 2009! http://www.blazekwebdesign.com/bwd/2008/10/19/clickable-links-through-a-transparent-image-in-css/comment-page-1/#comment-811 Craisin.com | Craisin.com Revamp - Spring 2009! Sun, 05 Apr 2009 05:18:41 +0000 http://blazekwebdesign.com/bwd/?p=89#comment-811 [...] Blazek Web Design - Clickable links through a transparent image in CSS — to achieve clickable RSS button behind the sidebar girl’s backpack strap [...] [...] Blazek Web Design – Clickable links through a transparent image in CSS — to achieve clickable RSS button behind the sidebar girl’s backpack strap [...]

]]> By: Doug http://www.blazekwebdesign.com/bwd/2008/10/19/clickable-links-through-a-transparent-image-in-css/comment-page-1/#comment-376 Doug Mon, 23 Feb 2009 05:12:12 +0000 http://blazekwebdesign.com/bwd/?p=89#comment-376 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. :P Thanks 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. :P

Thanks

]]> By: Douglas Wilson http://www.blazekwebdesign.com/bwd/2008/10/19/clickable-links-through-a-transparent-image-in-css/comment-page-1/#comment-338 Douglas Wilson Tue, 17 Feb 2009 10:58:06 +0000 http://blazekwebdesign.com/bwd/?p=89#comment-338 Iv tried doing that, but I just cant seem to get the right code... My links are images by the way.. Iv tried doing that, but I just cant seem to get the right code… My links are images by the way..

]]> By: Nathan Blazek http://www.blazekwebdesign.com/bwd/2008/10/19/clickable-links-through-a-transparent-image-in-css/comment-page-1/#comment-334 Nathan Blazek Tue, 17 Feb 2009 06:23:40 +0000 http://blazekwebdesign.com/bwd/?p=89#comment-334 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. 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.

]]> By: Douglas Wilson http://www.blazekwebdesign.com/bwd/2008/10/19/clickable-links-through-a-transparent-image-in-css/comment-page-1/#comment-315 Douglas Wilson Sat, 14 Feb 2009 08:18:24 +0000 http://blazekwebdesign.com/bwd/?p=89#comment-315 I have a question tho, How do I add a hover effect to the background link? I have a question tho, How do I add a hover effect to the background link?

]]> By: Douglas Wilson http://www.blazekwebdesign.com/bwd/2008/10/19/clickable-links-through-a-transparent-image-in-css/comment-page-1/#comment-311 Douglas Wilson Sat, 14 Feb 2009 02:45:46 +0000 http://blazekwebdesign.com/bwd/?p=89#comment-311 Awesome, Nice bit of problem solving. Just added it to my site! Thanks Awesome, Nice bit of problem solving. Just added it to my site!
Thanks

]]> By: nagakeciks http://www.blazekwebdesign.com/bwd/2008/10/19/clickable-links-through-a-transparent-image-in-css/comment-page-1/#comment-30 nagakeciks Mon, 03 Nov 2008 09:07:27 +0000 http://blazekwebdesign.com/bwd/?p=89#comment-30 cool tricks cool tricks

]]>