When using HTML/CSS to implement beautiful graphic design, we will need to use the transparent DIV what is the DIV html tag with css style ‘background: transparent;’. Just like you I use it and I meet the problem with it many times when I want to keep the transparent layer but I still want to keep the clickable element (button, link, text … ) under the fly layer. So I want to do the magic thing what can make it clickable through transparent DIV

clickable through div layer

Ok, in the case I share you guy this article, I already solved my problem and here is the key CSS


If in your transparent div element have another child elements and you want to make it still clickable, then let add this css


It will keep the parent transparent and click through in the case the child still keep clickable.

Clickable through transparent DIV layer in IE

Our challenge is not end here, we still meet the problem with IE, in this case, you can use this CSS for IE

background:white; opacity:0; filter:Alpha(opacity=0);

If you still meet the problem with too old IE you can use this magic CSS


filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent.png', sizingMethod='scale');
background:none !important;

With transparent.png is transparent image with size 1px x 1 px

Cross-browser clickable through transparent DIV layer via javascript library

Actually, the CSS element pointer-events will help your style work on all chrome and firefox version. If you think it ‘s too complex to fire with IE then you can simply use this solution what make pointer-events work in IE


Don’t ask me why, let ‘s tell me your problem. And good luck!





8 thoughts on “HTML/CSS make clickable through transparent DIV layer

  1. Thanks guys, you don’t know you already saved me a huge time to research to solve this CSS issue for my html site. Keep release the useful article like this. You are rock!!

  2. I meet the problem with my div layer inside the big layer, I want user still click and mark the text inside the child layer but the outside layer what I still keep it click through. How I can do that?

    1. In this case, you just need to style for the small one with style


      And the big one with style


      Try and see :).

  3. You blog have very many useful article, that ‘s nice to know. Do you have the partship for article releasee? What if I want to join your team? Thanks

    1. I want to join to your team author too. Please send me an email if you have that offer. Thanks!

      1. Welcome to our talent team. But we need some test before bring you to our team or not. Please don’t worry, if you love magento performance job, you will have a ticket for sure somedays.

  4. Hey! I still couldnt get my thing to work. My image in the back has an image map with an overlaying div ontop of the image. I tried to add pointer-events: none; to the div thats overlaying my image and stil cant click through it only below it where it is Open.

Comments are closed.