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 >

      <div >
        <a href="./images/111.jpg" data-lightbox="shkaf" data-title="gal1">
        <img  src="./images/111.jpg"></a>
        <div >
          <div >
            <i class='bx bx-zoom-in'></i>
          </div>
        </div>
        <div >
          <p>120 000р</p>
        </div>
      </div>

CodePudding user response：

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 >

  <div >
    <a href="./images/111.jpg" data-lightbox="shkaf" data-title="gal1">
      <img  src="./images/111.jpg"></a>
    <div >
      <div >
        <i class='bx bx-zoom-in'></i>
      </div>
    </div>
    <div >
      <p>120 000р</p>
    </div>
  </div>

CodePudding user response：

Here's what I added/changed to achieve the desired effect (pure CSS alterations):

1. 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.

2. 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 >
  <div >
    <a href="./images/111.jpg" data-lightbox="shkaf" data-title="gal1">
      <img  src="./images/111.jpg"></a>
    <div >
      <div >
        <i class='bx bx-zoom-in'></i>
      </div>
    </div>
    <div >
      <p>120 000р</p>
    </div>
  </div>
</div>