Cara membuat gambar lightbox hanya dengan css

Slamat malam, hai juragan apa kabar kalian

sumber:https://webcensar.com

Pada kesempatan kali ini saya ingin memberikan sebuah tutorial cara membuat Gambar lightbox hanya menggunakan css dan html gimanah caranya yuk simak di bawah ini adalah demonya

Akhir akhir ini saya lagi sering banget update artike sebuah tutorial yang berbasis css dan html, tanpa menyinggung sebuah javasccipt, maklum sajah di karnakan sekarang sudah jaman nya kita masuk di era AMP halaman yang di percepat, bukan tidak mungkin kalo artikel ini akan banyak di cari untuk 2,3 tahun ke depan kalo untuk sekarang masih banyak yang bertahan di html5, yang masih ketergantungan pada javascrip (mulainya kapan woi malah curhat)

Langsung sajah pertama kalian wajib masuk ke seting HTML pada template blog kalian lalu tempelkan css di bawah ini tepat di atas code ]]></b:skin>

biasanya untuk template AMP code ]]></b:skin> tidak ada karna sudah di parse  sebagai gantinya Pengguna AMP bisa menempatkanya di atas code </style>

$thumbnail-size: 80px;
$background-color: rgba(0,0,0,.8);

.thumbnail {
  max-width: $thumbnail-size;
  margin: 1em;
  float: left;
}

.lightbox {
  // Hide lightbox image
 display: none;

 // Position/style of lightbox
 position: fixed;
 z-index: 999;
 width: 100%;
 height: 100%;
 text-align: center;
 top: 0;
 left: 0;
 background: $background-color;
}

.lightbox img {
 /// Pad the lightbox image
 max-width: 90%;
 max-height: 80%;
 margin-top: 2%;
}

.lightbox:target {
 // Remove default outline and unhide lightbox
 outline: none;
 display: block;
}

body {
  margin: 1em;
  text-align: center;
}

.thumb-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Selanjut nya jika kalian ingin membuat sebuah artikel kalian gunakan code di bawah ini

<!-- thumbnail image wrapped in a link -->
<div class="thumb-wrapper">
  <a href="#img1">
    <img src="Url gambar thumbnail kalian" class="thumbnail">
  </a>
  <a href="#img2">
    <img src="Url gambar thumbnail kalian" class="thumbnail">
  </a>
  <a href="#img3">
    <img src="Url gambar thumbnail kalian" class="thumbnail">
  </a>
</div>

<!-- lightbox container hidden with CSS -->
<a href="#" class="lightbox" id="img1">
  <amp-img src="Url gambar kalian">
</a>
<a href="#" class="lightbox" id="img2">
  <amp-img src="Url gambar kalian">
</a>
<a href="#" class="lightbox" id="img3">
  <amp-img src="Url gambar kalian">
</a>

Keterangan kalian ganti url gambar dengan url gambar kalian

Terima kasih sudah membaca artikel tentang Cara memuat gambar lightbox hanya dengan css
Semoga bermanfaat

Baca juga