Cara Membuat Lightbox Tanpa JQuery part2

Haloo sahabat dumet ,bagaimana kabar ya? semoga baik-baik dan sehat selalu. Sebelumnya kita sudah membahas tentang Cara Membuat Lightbox Tanpa JQuery silahkan lihat disini, mungkin sahabat sudah tidak sabaran nih buat kelanjutan cara membuat lightbox tanpa JQuery ,yuk dimulai saja mengetik lagi.Pada file HTML kita akan menambahkan sedikit syntax berikut pada <div class=”portfolio_item”> ,pada tag <a href=””> kita isi dengan #portfolio_item-1 sampai 3 karena kita hanya menampilkan 3 gambar saja. Jadi file html-nya seperti ini

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Membuat Lightbox tanpa JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  

  <div class="portfolio">
    <div class="portfolio_item">
      <img src="a.jpg" alt="">
      <div class="portfolio_desc">
        <h3 class="portfolio_title">Ini adalah bagian title</h3>
       <!-- tambahan link target -->
        <a href="#portfolio_item-1" class="button">Lihat info</a>
      </div>
    </div>

    <div class="portfolio_item">
      <img src="b.jpg" alt="">
      <div class="portfolio_desc">
        <h3 class="portfolio_title">Ini adalah bagian title</h3>
        <!-- tambahan link target -->
        <a href="#portfolio_item-2" class="button">Lihat info</a>
      </div>
    </div>

    <div class="portfolio_item">
      <img src="c.jpg" alt="">
      <div class="portfolio_desc">
        <h3 class="portfolio_title">Ini adalah bagian title</h3>
        <!-- tambahan link target -->
        <a href="#portfolio_item-3" class="button">Lihat info</a>
      </div>
    </div>
  </div>

  <div class="portfolio-lightboxes">
    
    <!-- tambahan id untuk target -->
    <div id="portfolio_item-1" class="portfolio-lightbox">
      <div class="portfolio-lightbox_content">
        <a href="#" class="close"></a>
        <img src="1.jpg" alt="">
        <h3 class="portfolio-lightbox_title">Ini adalah bagian title didalam lightbox</h3>
        <p class="portfolio-lightbox_body">Ini adalah bagian content didalam lightbox</p>
      </div>
    </div>

    <!-- tambahan id untuk target -->
    <div id="portfolio_item-2" class="portfolio-lightbox">
      <div class="portfolio-lightbox_content">
        <a href="#" class="close"></a>
        <img src="4.jpg" alt="">
        <h3 class="portfolio-lightbox_title">Ini adalah bagian title didalam lightbox</h3>
        <p class="portfolio-lightbox_body">Ini adalah bagian content didalam lightbox</p>
      </div>
    </div>
     
    <!-- tambahan id untuk target -->
    <div id="portfolio_item-3" class="portfolio-lightbox">
      <div class="portfolio-lightbox_content">
        <a href="#" class="close"></a>
        <img src="3.jpg" alt="">
        <h3 class="portfolio-lightbox_title">Ini adalah bagian title didalam lightbox</h3>
        <p class="portfolio-lightbox_body">Ini adalah bagian content didalam lightbox</p>
      </div>
    </div>

  </div>

</body>
</html>

Oke langkah berikutnya ketikan file css seperti berikut ini

*, *::before, *::after {
  box-sizing: border-box;
}

body{
  margin:0;
  font-family: 'Arial', sans-serif;
  font-weight: 400;
}

img{
  max-width: 100%;
}

.basic-example{
  display: flex;
  background: #ede2a6;
  padding:3em;
}

p:target{
  background: #91f7dc;
}

.portfolio{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap:1em;
  padding: 1em;
  background: #fcd994;
}

.portfolio_item img{
  width: 100%;
  height: auto;
}

.portfolio_item{
  background: #fff;
  width: 6em;
}

.portfolio_desc{
  padding:0.5em;
}

.portfolio_title{
  font-size: 0.7em;
  margin-top: 0;
}

.portfolio-lightbox{
  position: fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  background: rgba(207, 183, 247,.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0,1);
  transform-origin: right; /* membuat animasi gambar bergerak kekanan */
  transition: transform ease-in-out 400ms;
}

.portfolio-lightbox:target{
  transform: scale(1,1);
  transform-origin: left;} /* membuat animasi gambar bergerak dari kiri kekanan */


.portfolio-lightbox_content{
  width: 50%;
  background: #000;
  padding: 1em;
  position: relative;
}

.close{
  position: absolute;
  width: 2em;
  height: 2em;
  background: red;
  top:-1em;
  right: -1em;
  border-radius: 50%;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close::after{
  content: "x";
  color:#fff;
  font-weight: 800;

}*/

Jadi hasilnya saat kita klik pada text lihat info, maka seperti berikut tampilannya

Nah gambar diatas hasil lightbox yang kita buat, nanti saat kita klik close maka gambar akan menutup ke sebelah kanan, dan saya kira cukup pembahasan pada artikel cara membuat lightbox tanpa JQuery , jadi jangan pernah untuk berhenti mencoba-coba ya.

Semoga bermanfaat dan tidak lupa selalu ikuti artikel-artikel lainnya.

Terima kasih.