Search code examples
javascriptcssgallerylightbox

How to fix: image gallery, image with overlay not opening lightbox

I want the images to have a hover effect that shows an overlay with an icon (let's say the zoom icon), but when it shows it doesn't open the lightbox. Any help on what I'm doing wrong would be greatly appreciated.

Here's a section of the code I tried to use for the overlay:

<div class="row">
  <div class="column">
    <img src="https://source.unsplash.com/user/mkmueller/likes/600x400" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
    <div class="overlay">
    <div class="text">Hello World</div>
  </div>
  </div>

.column {
  float: left;
  width: 25%;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.column:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

As you can see in this fiddle: https://jsfiddle.net/Niikp/bgrpketc/ I set the overlay with some text in the first pic, and as I stated previously it prevents the image to open the lightbox.

My goal is to achieve a result like this: http://bravo-bravissimo.com/bb19/prova-lightbox/

Solution

  • As you can see the overlay is hiding the img completely and hence blocking the events that can pass to them. If your intent is to just show the overlay but the overlay itself does not perform any actions, then set pointer-events: none to your overlay css and your click events would be passed down and the modal would be triggered open.

    Modified fiddle here -> https://jsfiddle.net/marudhupandiyang/z1prvsne/3/