Placing a CSS transparent overlay over image AND making a JavaScript function work when image is clicked?

Question

I'm having trouble with scripting my CSS in such a way that it will let me do the following at the same time :

• clear the colored overlay (red) when I hover over the
• make my picture clickable so that it will perform an unrelated JavaScript function

Currently I can only do only one of these things separately at a time.

My first attempt - clearing the colored overlay on hover BUT my JavaScript function will not work:

 function myFunction() { /..../ } 

 .image { position:relative; width:400px; height:400px; } .image:after { content:'\\A'; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(256,0,0,0.6); opacity:1; transition: all 0.5s; -webkit-transition: all 0.5s; } .image:hover:after { opacity:0; } .cursor { cursor: pointer} .myImage { background: url("http://i.stack.imgur.com/Sjsbh.jpg") no-repeat 50% 50%; width: 400px; height: 400px; background-size: cover; } 

 <div class="image"> <!--when the "image" class is present, I cannot perform myFunction() by clicking on the picture --> <div class="myImage cursor" onclick="myFunction()"> </div> </div>http://jsfiddle.net/9z26ky19/2429/#run 

My alternate attempt - here my JavaScript function works BUT I no longer have a colored (red) overlay since I got rid of the "image" class:

 function myFunction() { /..../ } 

 .image { position:relative; width:400px; height:400px; } .image:after { content:'\\A'; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(256,0,0,0.6); opacity:1; transition: all 0.5s; -webkit-transition: all 0.5s; } .image:hover:after { opacity:0; } .cursor { cursor: pointer} .myImage { background: url("http://i.stack.imgur.com/Sjsbh.jpg") no-repeat 50% 50%; width: 400px; height: 400px; background-size: cover; } 

 <div> <!--when the "image" class is NOT present, myFunction() JavaScript works BUT I no longer have the colored (red) overlay --> <div class="myImage cursor" onclick="myFunction()"> </div> </div>http://jsfiddle.net/9z26ky19/2429/#run 

How can I script it in a way such that I can have both a colored (red) overlay over my image AND have my JavaScript myFunction work?

Answer 1

Use pointer-events: none; on the :after pseudo element to make it transparent to mouse events:

 function myFunction() { console.log('click'); } 

 .image { position: relative; width: 400px; height: 400px; } .image:after { content: '\\A'; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(256, 0, 0, 0.6); opacity: 1; transition: all 0.5s; -webkit-transition: all 0.5s; pointer-events: none; } .image:hover:after { opacity: 0; } .cursor { cursor: pointer } .myImage { background: url("http://i.stack.imgur.com/Sjsbh.jpg") no-repeat 50% 50%; width: 400px; height: 400px; background-size: cover; } 

 <div class="image"> <!--when the "image" class is present, I cannot perform myFunction() by clicking on the picture --> <div class="myImage cursor" onclick="myFunction()"> </div> </div>http://jsfiddle.net/9z26ky19/2429/#run 

Answer 2

How about simply moving the click handler to the parent .image <div> ?

 function myFunction() { console.log('clicked'); } 

 .image { position:relative; width:400px; height:400px; } .image:after { content:'\\A'; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(256,0,0,0.6); opacity:1; transition: all 0.5s; -webkit-transition: all 0.5s; } .image:hover:after { opacity:0; } .cursor { cursor: pointer} .myImage { background: url("http://i.stack.imgur.com/Sjsbh.jpg") no-repeat 50% 50%; width: 400px; height: 400px; background-size: cover; } 

 <div class="image" onclick="myFunction()"> <div class="myImage cursor"> </div> </div>