css click on image that covered with hover overlay - html

Question

Hello so i made a gallery with images , and i added hover overlay to it, but also added lightbox, so now when i try to click on image i am clicking on overlay. how do i make it clickable trough hover layer that i made ?
.gallery-image{
position: relative;
width: 300px;
box-shadow: rgb(139, 9, 9) 0px 5px 10px;
}
.image-img{
width: 100%;
display: block;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: var(--tect-onblack);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: all .4s ease;
}
.image-title i{
font-size: 70px;
}
.overlay:hover{
opacity: 1;
transition: all .4s ease;
cursor: pointer;
}
.overlay >*{
transform: translateY(30px);
transition: all .4s ease;
}
.overlay:hover >*{
transform: translateY(0);
}
<div class="gallery">
<div class="gallery-image">
<a href="./images/111.jpg" data-lightbox="shkaf" data-title="gal1">
<img class="image-img" src="./images/111.jpg"></a>
<div class="overlay">
<div class="image-title">
<i class='bx bx-zoom-in'></i>
</div>
</div>
<div class="price">
<p>120 000р</p>
</div>
</div>

Answer 1

Here's what I added/changed to achieve the desired effect (pure CSS alterations):
Moved the hover to .gallery .gallery-image and made it display: inline-block. This is so that overlay can still change, but its visual state is not tied to an event. Making it inline-block limits the hover area to the width of the content.
Added pointer-events: none to .overlay, so that mouse clicks will pass through it.
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, auto));
gap: 2rem;
align-items: center;
justify-content: space-evenly;
max-width: 1920px;
margin: 4rem auto 0 auto;
}
.gallery-image {
position: relative;
width: 300px;
box-shadow: rgb(139, 9, 9) 0px 5px 10px;
}
.image-img {
width: 100%;
display: block;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: var(--tect-onblack);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: all .4s ease;
pointer-events: none;
}
.image-title i {
font-size: 70px;
}
.gallery-image:hover .overlay {
opacity: 1;
transition: all .4s ease;
cursor: pointer;
}
.overlay>* {
transform: translateY(30px);
transition: all .4s ease;
}
.overlay:hover>* {
transform: translateY(0);
}
<div class="gallery">
<div class="gallery-image">
<a href="./images/111.jpg" data-lightbox="shkaf" data-title="gal1">
<img class="image-img" src="./images/111.jpg"></a>
<div class="overlay">
<div class="image-title">
<i class='bx bx-zoom-in'></i>
</div>
</div>
<div class="price">
<p>120 000р</p>
</div>
</div>
</div>

Answer 2

I used the current clicked class to create a click event.
let imgs = document.querySelectorAll('.overlay');
imgs.forEach((img) => {
img.addEventListener("click", () => {
console.log("Image was clicked");
});
});
.gallery-image {
position: relative;
width: 300px;
box-shadow: rgb(139, 9, 9) 0px 5px 10px;
}
.image-img {
width: 100%;
display: block;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: var(--tect-onblack);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: all .4s ease;
}
.image-title i {
font-size: 70px;
}
.overlay:hover {
opacity: 1;
transition: all .4s ease;
cursor: pointer;
}
.overlay>* {
transform: translateY(30px);
transition: all .4s ease;
}
.overlay:hover>* {
transform: translateY(0);
}
<div class="gallery">
<div class="gallery-image">
<a href="./images/111.jpg" data-lightbox="shkaf" data-title="gal1">
<img class="image-img" src="./images/111.jpg"></a>
<div class="overlay">
<div class="image-title">
<i class='bx bx-zoom-in'></i>
</div>
</div>
<div class="price">
<p>120 000р</p>
</div>
</div>