Make a HTML image "click-see-through" - html

Question

I have an image, and on top of that image is another smaller image. When the first image is clicked, the second one appears, and it disappears when the first image is clicked again. My problem is when the second image appears over the first one, it makes the area that it covers of the first image unclickable. Is it possible to make it so the first image can be clicked through the second image?
This is the HTML for the second image (it's generated in PHP):
Echo '<img src="images/tick.png" id="tick' . $i .'" class="hidden" style="position: absolute; top: 0px; left: 70%;"/>';

Answer 1

Simply put both images in a container div, and attach the click event handler to that instead of the bigger image. This way you can simply make use of event bubbling (which isn't available on the bigger image since it cannot have child elements, such as the smaller image).
Find a working solution here:
https://jsfiddle.net/6nnwy3xw/
$(document).ready(function() {
$('.imgcontainer').on('click', function() {
$(this).toggleClass('toggleImg');
});
})
.imgcontainer {
height: 300px;
width: 300px;
position: relative;
}
.imgcontainer img:first-child {
display: block;
height: 300px;
width: 300px;
}
.imgcontainer img+img {
position: absolute;
top: 50px;
left: 50px;
opacity: 0;
transition-duration: 0.3s;
}
.imgcontainer.toggleImg img+img {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="imgcontainer">
<img src="http://lorempixel.com/300/300" />
<img src="http://lorempixel.com/200/200" />
</div>
I'm assuming your use-case is some kind of checkbox replacement element? In this case, this may also be of interest to you:
Use images like checkboxes
If that is the case, I'd make the surrounding diva label instead, so it also automatically checks your (probably hidden) real checkbox.

Answer 2

If I understand the issue you're describing properly, you could try turning pointer-events off for the second image, that is often displayed over the click-target:
.two { pointer-events: none; }
Note that this is only supported with HTML in Internet Explorer 11 and up (as well as in Chrome and Firefox). For SVG, support was available in IE 9. That may suffice for a work-around if needed.
Fiddle: http://jsfiddle.net/tbqxjp19/
For better support you should move your handler to an element that will not be obstructed, and as such will always work to toggle the visibility of the second image:
<div class="images">
<img src="http://placehold.it/100x100" class="one" />
<img src="http://placehold.it/100x100/000000" class="two" />
</div>
document.querySelector( ".images" ).addEventListener( "click", function () {
this.classList.toggle( "toggled" );
});
The above simply binds a handler to click events on the .images container, toggling a class that will hide and/or reveal the second image, given the following:
.toggled .two {
opacity: .1;
}
Fiddle: http://jsfiddle.net/tbqxjp19/1/

Answer 3

Try this , if you are fine with jquery solution.
HTML
<img src="images/large.png" class ="image" id="image1" style="position: absolute; top: 0px; left: 0px;" />
<img src="images/small.png" id="image2" class ="image" style="position: absolute; top: 0px; left: 0px; z-index:10;" />
css
.hiddenimage{
display:none;
}
JQuery
$(".image").click(function(){
("#image2").toggleClass("hiddenimage");
})