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

Question

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/

Answer 1

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/

Answer 2

Instead of giving onclick="openModal();currentSlide(1)" function to img give to div column

function openModal() {
  document.getElementById("myModal").style.display = "block";
}

function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

body {
  font-family: Verdana, sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

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

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.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;
}

<h2 style="text-align:center">Lightbox</h2>

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

<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="https://source.unsplash.com/user/mkmueller/likes/600x400" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://source.unsplash.com/user/mkmueller/likes/603x402" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="https://source.unsplash.com/user/mkmueller/likes/606x404" style="width:100%">
    </div>
    
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://source.unsplash.com/user/mkmueller/likes/609x406" style="width:100%">
    </div>
    
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>


    <div class="column">
      <img class="demo cursor" src="https://source.unsplash.com/user/mkmueller/likes/600x400" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://source.unsplash.com/user/mkmueller/likes/603x402" style="width:100%" onclick="currentSlide(2)" alt="Snow">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://source.unsplash.com/user/mkmueller/likes/606x404" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://source.unsplash.com/user/mkmueller/likes/609x406" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>

Answer 3

Just add onclick attribute on overlay div

<div class="row">

Hello World