Image
Image

Image

Showcase image in lightbox / Zoom image when clicked

notion image
In this section, you will be able to sow images in the light box or you can able to zoom the image when clicked.
Use this code Snippet in body section to display the image in the light box. 
<!--Show images in the light box on click-->
<script>
const lightbox = document.querySelectorAll("figure>div")
const allImg = [...lightbox]


const lightBox = () => {
allImg.forEach((img) => {
   img.addEventListener('click', () => {
   		if(img.className === "showimg"){
          img.classList.remove("showimg")
   		}else{
   		  img.classList.add("showimg")
   		}
    });
})
}

lightBox()
</script>
And also add this code snippet in the CSS section to see the result.

.showimg {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: all .50s ease-in-out;
}

.showimg img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain !important;
  transition: all .50s ease-in-out;
}