Highlight an image on click in grid layout and bring it to front

Question

I'm really stuck and hope someone can help me. I'm using a grid layout (flexbox later as a fallback solution but that should make no difference) and have serveral images that on click need to be in front, behind that should be a pop up (overlapping) and behind that an overlay where you can see the background through, ie the grid layout.

So far I've managed to open the pop up and the overlay div on click and close it after another click. I can't see how I could work with changing eg the z-index to create the order I need. All I need is that donut on top of anything else when I click on it... Any thoughts?

HTML

<div class="parent">
    <div class="div1">div1 </div>
    <div class="div2 popup">
      <img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png" width="100px" onclick="myFunction()">
      <span class="popuptext" id="myPopup">Popup text...</span>
    </div>
    <div class="div3">div3 </div>
    <div class="div4">div4 </div>
    <div class="div5">div5 </div>
    <div class="div6">div6 </div>
    <div class="div7">div7 </div>
    <div class="div8">div8 </div>
    <div class="div9">div9 </div>
  </div>
  <div id="overlay" onclick="remove()">

CSS

 .parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  min-height: 100vh;
  }
  .div1 { grid-area: 1 / 1 / 3 / 2; background-color: yellow;}
  .div2 { grid-area: 1 / 2 / 2 / 3; background-color: red;}
  .div3 { grid-area: 1 / 3 / 2 / 4; background: blue;}
  .div4 { grid-area: 1 / 4 / 2 / 5; background: grey;}
  .div5 { grid-area: 3 / 1 / 5 / 2; background: pink;}
  .div6 { grid-area: 2 / 2 / 4 / 4; background: white;}
  .div7 { grid-area: 2 / 4 / 4 / 5; background: purple;}
  .div8 { grid-area: 4 / 2 / 5 / 4; background: black;}
  .div9 { grid-area: 4 / 4 / 5 / 5; background: green;}

.popup {
 position: relative;
 display: inline-block;
 cursor: pointer;
}

.popup .popuptext {
 visibility: hidden;
 width: 160px;
 background-color: #555;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 8px 0;
 position: absolute;
 z-index: 1;
 left: 50%;
 margin-left: -80px;
}

.popuptext.show {
 visibility: visible;
}

#overlay{
  visibility: hidden;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,.5);
  position: absolute;
  top:0;
  left: 0;
}
#overlay.show{
  visibility: visible;
}

JavaScript

function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.add("show");
  var overlay = document.getElementById("overlay");
  overlay.classList.add("show");
}
function remove(){
  var overlay = document.getElementById("overlay");
  overlay.classList.remove("show");
  var popup = document.getElementById("myPopup");
  popup.classList.remove("show");
}

Any help is highly appreciated.

https://jsfiddle.net/3L20ndw7/

Answer 1

have you tried fancybox? its an excellent tool you can use. just add the data-fancybox attribute to your image `

<div class="div1">div1 </div>
<div class="div2 popup">
  <img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png" width="100px" data-fancybox >Popup text...</span>
</div>
<div class="div3">div3 </div>
<div class="div4">div4 </div>
<div class="div5">div5 </div>
<div class="div6">div6 </div>
<div class="div7">div7 </div>
<div class="div8">div8 </div>
<div class="div9">div9 </div>

` make sure you add the references to the library

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css

Answer 2

If anyone's interested, I've solved it. I don't know if this is the best way but it seems to work:

HTML

 <div class="parent">
      <div class="div1">div1 </div>
      <div class="div2">
        <div class="absolute">
          <img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png" width="100px" onClick="zIndex()">
          <div id="myPopup">
            <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
          </div>
        </div>
      </div>
      <div class="div3">div3 </div>
      <div class="div4">div4 </div>
      <div class="div5">div5</div>
      <div class="div6">div6</div>
      <div class="div7">div7 </div>
      <div class="div8">div8 </div>
      <div class="div9">div9 </div>
    </div>
    <div id="overlay">
    </div>
    <div id="cover" onClick="remove()">
    </div>

CSS

.z-index{
  z-index: 4 !important;
}
.absolute{
  position: absolute;
  z-index: 2;
}
#myPopup{
  width: 300px;
  background: red;
}
.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  min-height: 100vh;
}
.parent div{
  width: auto;
}
.div1 { grid-area: 1 / 1 / 3 / 2; background-color: yellow;}
.div2 { grid-area: 1 / 2 / 2 / 3; background-color: red;}
.div3 { grid-area: 1 / 3 / 2 / 4; background: blue;}
.div4 { grid-area: 1 / 4 / 2 / 5; background: grey;}
.div5 { grid-area: 3 / 1 / 5 / 2; background: pink;}
.div6 { grid-area: 2 / 2 / 4 / 4; background: white;}
.div7 { grid-area: 2 / 4 / 4 / 5; background: purple;}
.div8 { grid-area: 4 / 2 / 5 / 4; background: black;}
.div9 { grid-area: 4 / 4 / 5 / 5; background: green;}

#img:hover{
  cursor: pointer;
}
#overlay{
  visibility: hidden;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,.5);
  position: absolute;
  top:0;
  left: 0;
}
#overlay.show{
  visibility: visible;
  z-index: 3;
}
#cover{
  visibility: hidden;
  width: 100%;
  height: 100vh;
  background: transparent;
  position: absolute;
  top:0;
  left: 0;
}
#cover.show{
  visibility: visible;
  z-index: 5;
}
#myPopup{
  visibility: hidden;
}
#myPopup.show{
  visibility: visible;
}

JavaScript

  function zIndex(){
    $( "div.absolute" ).toggleClass( "z-index" );
    var overlay = document.getElementById("overlay");
    overlay.classList.add("show");
    var cover = document.getElementById("cover");
    cover.classList.add("show");
    var popup = document.getElementById("myPopup");
    popup.classList.add("show");
  }
  function remove(){
    var overlay = document.getElementById("overlay");
    overlay.classList.remove("show");
    var cover = document.getElementById("cover");
    cover.classList.remove("show");
    var popup = document.getElementById("myPopup");
    popup.classList.remove("show");
    $( "div.absolute" ).removeClass( "z-index" );
  }

https://jsfiddle.net/wxgo0tky/4/