Membuat Image Lighbox Sederhana Tanpa JavaScript

HTML

 
<div class="mainwrapper">
  <div class="thumbnail">
    <a href="#gambar-1">
      <img src="https://raw.githubusercontent.com/albughisy7/BLOGGER/main/Nelayan_Kode/Images/Nelayan%20Kode.png">
    </a>
  </div>
  <div class="overlay" id="gambar-1">
    <div>
      <a href="#" class="close"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-rounded-x" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#fefefe" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <path d="M10 10l4 4m0 -4l-4 4" />
  <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z" />
</svg></a>
    </div>
    <img src="https://raw.githubusercontent.com/albughisy7/BLOGGER/main/Nelayan_Kode/Images/Nelayan%20Kode.png" alt="Nelayan Kode">
  </div>
</div>

CSS

​x
 
.mainwrapper {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
​
.thumbnail{
  text-align:center
}
  
.thumbnail img {
  width: 300px;
  max-width: 60%;
  border-radius: 5px;
}
​
/* overlay by webprogramminunpas and modified by nelayankode.com*/
.overlay {
  width: 0;
  height: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 2;
  transition: 0.8s;
  display: flex;
  align-items:center;
  justify-content:center;
}
​
.overlay:target {
  width: auto;
  height: auto;
  bottom: 0;
  right: 0;
  background: rgb(112 112 112 / 70%);
}
​
.overlay img {
  max-width: 85%;
  height: auto;
  box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}
​
.overlay:target img {
  animation: zoomDanFade 1s;
}
​
.overlay .close {
  position: absolute;
  top: 2%;
  right: 2%;
  text-decoration: none;
  line-height: 14px;
  padding: 5px;
  opacity: 0;
}
  
.overlay svg{
    background: transparent;
}
​
.overlay:target .close {
  animation: slideDownFade 0.5s 0.5s forwards;
  background: transparent;
}
​
/* animasi */
@keyframes zoomDanFade {
  0% {
    transform: scale(0);
    opacity: 0;
  }
​
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
​
@keyframes slideDownFade {
  0% {
    opacity: 0;
    margin-top: -20px;
  }
​
  100% {
    opacity: 1;
    margin-top: 0;
  }
}

Type Javascipt code here...xxxxxxxxxx
 
​

<!doctype html><html><head> <script src="https://raw.githack.com/albughisy7/BLOGGER/main/Jun_Kode/jQuery/jquery.min.js"></script> <style> *{color:#1d1e22; border-color:#1d1e22; background: transparent;/*#fefefe*/ scrollbar-width:thin; scrollbar-color: #d8d8d8 transparent}  input{border:1px solid; outline: none;} button{padding: 4px 8px}.mainwrapper {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.thumbnail{
  text-align:center
}
  
.thumbnail img {
  width: 300px;
  max-width: 60%;
  border-radius: 5px;
}

/* overlay by webprogramminunpas and modified by nelayankode.com*/
.overlay {
  width: 0;
  height: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 2;
  transition: 0.8s;
  display: flex;
  align-items:center;
  justify-content:center;
}

.overlay:target {
  width: auto;
  height: auto;
  bottom: 0;
  right: 0;
  background: rgb(112 112 112 / 70%);
}

.overlay img {
  max-width: 85%;
  height: auto;
  box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.overlay:target img {
  animation: zoomDanFade 1s;
}

.overlay .close {
  position: absolute;
  top: 2%;
  right: 2%;
  text-decoration: none;
  line-height: 14px;
  padding: 5px;
  opacity: 0;
}
  
.overlay svg{
    background: transparent;
}

.overlay:target .close {
  animation: slideDownFade 0.5s 0.5s forwards;
  background: transparent;
}

/* animasi */
@keyframes zoomDanFade {
  0% {
    transform: scale(0);
    opacity: 0;
  }

100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideDownFade {
  0% {
    opacity: 0;
    margin-top: -20px;
  }

100% {
    opacity: 1;
    margin-top: 0;
  }
} </style> </head><body> <div class="mainwrapper">
  <div class="thumbnail">
    <a href="#gambar-1">
      <img src="https://raw.githubusercontent.com/albughisy7/BLOGGER/main/Nelayan_Kode/Images/Nelayan%20Kode.png">
    </a>
  </div>
  <div class="overlay" id="gambar-1">
    <div>
      <a href="#" class="close"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-rounded-x" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#fefefe" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <path d="M10 10l4 4m0 -4l-4 4" />
  <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z" />
</svg></a>
    </div>
    <img src="https://raw.githubusercontent.com/albughisy7/BLOGGER/main/Nelayan_Kode/Images/Nelayan%20Kode.png" alt="Nelayan Kode">
  </div>
</div><script>  </script> </body> </html>

<!doctype html><html><head> <script src="https://raw.githack.com/albughisy7/BLOGGER/main/Jun_Kode/jQuery/jquery.min.js"></script> <style> *{color:#1d1e22; border-color:#1d1e22; background: transparent;/*#fefefe*/ scrollbar-width:thin; scrollbar-color: #d8d8d8 transparent}  input{border:1px solid; outline: none;} button{padding: 4px 8px}.mainwrapper {