إنضم لنا

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 Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail