Cara Membuat Gambar Lightbox Dengan CSS Tanpa Javascript

Cara Membuat Gambar Lightbox Dengan CSS Tanpa Javascript - Gambar lightbox atau lightbox image adalah salah satu cara yang digunakan untuk menampilkan gambar secara penuh atau full layar

Daftar isi

Baca Juga

Cara Membuat Gambar Lightbox Dengan CSS Tanpa Javascript - Gambar lightbox atau lightbox image adalah salah satu cara yang digunakan untuk menampilkan gambar secara penuh atau full layar. Dengan adanya lightbox ini maka gambar-gambar yang ada di artikel blog bisa ditampilkan dalam ukuran kecil namun akan berubah membesar dengan ukuran yang sebenarnya saat gambar yang kecil tersebut di klik.

Sebenarnya apa sih lightbox itu? Lightbox image merupakan sebuah efek pencahayaan yang digunakan untuk memperbaiki kualitas pencahayaan pada sebuah foto, agar foto yang ditampilkan menjadi lebih baik dan jelas. Efek ini biasanya digunakan pada studio foto. Dan di web design, efek ini digunakan pada gambar artikel yang bisa membesar (zoom effect) atau bisa juga digunakan pada elemen lainnya, meskipun dengan menggunakan cara yang berbeda. Namun fungsinya tetap sama yaitu memperjelas tampilan pada sebuah gambar atau elemen lainnya.

Dan pada artikel kali ini kami memberikan tutorial cara membuat gambar lightbox (lightbox image) dengan menggunakan gambar tunggal sebagai objeknya. Jadi hanya satu gambar yang bisa tampil saat gambar tersebut di klik. Selain itu, untuk membuat lightbox ini hanya menggunakan kode CSS dan HTML saja tanpa perlu memasang kode Javascript atau jQuery, sehingga dengan hanya menggunakan kode CSS dan HTML tersebut, membuat loading blog tidak akan berpengaruh meski sebenarnya penggunaan Javascript memberikan tampilan yang lebih baik, namun terkadang mempengaruhi loading blog.

Untuk Demo dari lightbox image silahkan uji langsung pada DEMO dibawah ini. Didalam demo tersebut, selain sudah menampilkan gambar dalam bentuk zoom, juga disertai tombol Close (Tutup), sehingga tidak membuat tampilan halaman blog melakukan Loading ulang.

CEK DEMO
Bagaimana Cara Membuatnya?
Untuk membuat gambar lightbox seperti pada halaman DEMO, silahkan ikuti caranya dibawah ini:

1. Masukkan kode CSS dibawah ini kebagian kode CSS template blog Anda
   
   

   .lightbox_wrapper {
   padding: 10px;
   margin: 10px;
   text-align: center;
   }
   a.lightbox img {
   height: 100px;
   border: 3px solid white;
   box-shadow: 0px 0px 8px rgba(0,0,0,.3);
   }
   
   .lightbox-target {
   position: fixed;
   top: -100%;
   width: 100%;
   background: #ffffff;
   width: 100%;
   opacity: 0;
   -webkit-transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -o-transition: opacity .5s ease-in-out;
   transition: opacity .5s ease-in-out;
   overflow: hidden;
   }
   
   .lightbox-target img {
   margin: auto;
   position: absolute;
   top: 0;
   left:0;
   right:0;
   bottom: 0;
   max-height: 0%;
   max-width: 0%;
   border: 3px solid #ffffff;
   box-shadow: 0px 0px 8px rgba(0,0,0,.3);
   box-sizing: border-box;
   -webkit-transition: .5s ease-in-out;
   -moz-transition: .5s ease-in-out;
   -o-transition: .5s ease-in-out;
   transition: .5s ease-in-out;
   }
   
   a.lightbox-close {
   display: block;
   width:50px;
   height:50px;
   box-sizing: border-box;
   border-radius: 50px;
   border: 1px solid #000000;
   background: #ffffff;
   color: #000000;
   text-decoration: none;
   position: absolute;
   top: -80px;
   right: 40px;
   -webkit-transition: .5s ease-in-out;
   -moz-transition: .5s ease-in-out;
   -o-transition: .5s ease-in-out;
   transition: .5s ease-in-out;
   }
   
   a.lightbox-close:before {
   content: "";
   display: block;
   height: 30px;
   width: 1px;
   background: #000000;
   position: absolute;
   left: 26px;
   top:10px;
   -webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
   -o-transform:rotate(45deg);
   transform:rotate(45deg);
   }
   
   a.lightbox-close:after {
   content: "";
   display: block;
   height: 30px;
   width: 1px;
   background: #000000;
   position: absolute;
   left: 26px;
   top:10px;
   -webkit-transform:rotate(-45deg);
   -moz-transform:rotate(-45deg);
   -o-transform:rotate(-45deg);
   transform:rotate(-45deg);
   }
   
   .lightbox-target:target {
   opacity: 1;
   top: 0;
   bottom: 0;
   }
   
   .lightbox-target:target img {
   max-height: 100%;
   max-width: 100%;
   }
   
   .lightbox-target:target a.lightbox-close {
   top: 0px;
   }
   

2. Jika kode CSS digunakan di halaman artikel, gunakan Tag Kondisional pada kode CSS tersebut, atau gabungkan saja dengan tag kondisional kode CSS untuk halaman artikel.
3. Simpan template
4. Pasang kode HTML berikut ini kedalam postingan artikel:
   
   

   <div class="lightbox_wrapper">
   <a class="lightbox" href="#image">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiArzN6fekbH7KX-hq1KTwlVc7PA4OQSvwCzk9YSVv9aDXkSgWEs0w6Floa0sg50MxkYMLGQEuHXQAchsYtBExyK93ovRtqFLdxVej323WBGpivLVO0U57J6Cy42gUoSWP1OBSvrbk9c2A/s1600-rw/logo.jpg"/>
   </a> 
   </div>
   <div class="lightbox-target" id="image">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiArzN6fekbH7KX-hq1KTwlVc7PA4OQSvwCzk9YSVv9aDXkSgWEs0w6Floa0sg50MxkYMLGQEuHXQAchsYtBExyK93ovRtqFLdxVej323WBGpivLVO0U57J6Cy42gUoSWP1OBSvrbk9c2A/"/>
      <a class="lightbox-close" href="#"></a>
   </div>
   

   
   Catatan:
   Ganti URL gambar yang ditandai dengan URL gambar artikel blog Anda.
   
5. Selesai

Itulah cara membuat gambar lightbox atau lightbox image dengan menggunakan gambar tunggal dan menggunakan CSS HTML tanpa perlu menggunakan Javascript. Untuk yang menggunakan Javascript, lain waktu akan kami share juga dan beberapa lightbox image versi blogger yang dimodifikasi juga akan kami share. Karena di Blogger sendiri sebenarnya sudah ada fitur Lightbox Image ini namun masih kurang menarik. Terimakasih.