Cara Membuat Popup Image Lightbox dengan HTML dan CSS Tanpa JavaScript
Cara Membuat Image Lightbox dengan HTML dan CSS Tanpa JavaScript - Gambar merupakan hal yang sudah lama dibuat oleh manusia. Tujuan dari pembuatan gambar ini ada bermacam-macam, salah satu di antaranya adalah dijadikan sebagai media informasi.
Informasi yang disampaikan melalui media gambar jauh lebih mudah jika dibandingkan dengan informasi yang disampaikan melalui lisan. Hal ini disebabkan oleh kendala bahasa, yang mana di masing masing daerah memiliki jenis bahasa yang berbeda. Beda halnya dengan gambar, informasinya dapat dimengerti oleh sebagian besar orang walaupun berbeda bahasa dan negara.
Gambar juga digunakan untuk menyampaikan informasi penting pada sebuah blog atau website yang mungkin tidak akan jelas jika hanya disampaikan secara tulisan.
Pada blog atau website gambar yang ditampilkan kadang tidak cukup besar sehingga kurang jelas jika dilihat oleh pengunjung. Sebenarnya masalah ini bisa saja diatasi dengan cara melakukan zoom in pada browser, akan tetapi cara ini bisa dibilang cara yg kurang elegan :) Karena ketika melakukan zoom in pada browser, bukan hanya gambar yang ikut membesar tapi tulisan dan element lainnya juga akan ikut membesar.
Lantas bagaimana cara elegan jika ingin melakukan zoom in pada gambar? Nah salah satu caranya adalah dengan membuat popup image dengan lighbox. Cara kerjanya yakni ketika gambar diklik maka akan muncul popup yang menampilkan gambar dalam ukuran tertentu dan membuat element atau objek di belakangnya menjadinya redup atau blur.
Cara Membuat Popup Image dengan Lighbox
Sebenarnya sudah banyak tutorial yang membahas tentang cara membuat popup image dengan lighbox akan tetapi sebagian besar menggunakan kode javaScript. Memang apa masalahnya jika menggunakan javaScript? Semakin banyak kode yang digunakan, akan ada kemungkinan membuat loading blog menjadi lebih lambat. Oleh karena itu image lighbox yang akan saya share kali ini adalah hanya dengan menggunakan kode HTML dan CSS saja. Dan mungkin pada postingan berikutnya juga akan saya buatkan versi yang menggunakan JavaScript, sehingga sobat dapat melihat perbedaan di antara keduanya.
Untuk membuat popup image dengan lighbox silahkan ikuti tutorialnya di bawah ini.
- Pertama-tama buatlah sebuah file html dan beri nama ImageLighbox.html. Jika menggunakan text editor seperti VS Code maka akan lebih mudah lagi, tinggal ketik html5 kemudian tekan enter. Maka hasilnya akan seperti berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Lighbox</title>
</head>
<body>
</body>
</html>- Tambahkan kode CSS berikut di atas kode </head>
<style>
.mainwrapper {
background: #fefefe;
display: flex;
width: 100%;
height: 650px;
justify-content: center;
align-items: center;
}
img.imgthumb {
width: 150px;
border-radius: 10px;
}
/* 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: 9999;
transition: .8s;
text-align: center;
padding: 100px 0;
}
.overlay:target {
width: auto;
height: auto;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .7);
}
.overlay img {
max-height: 100%;
box-shadow: 2px 2px 7px rgba(0, 0, 0, .5);
}
.overlay:target img {
animation: zoomDanFade 1s;
}
.overlay .close {
position: absolute;
top: 2%;
left: 2%;
margin-left: -20px;
color: white;
text-decoration: none;
line-height: 14px;
padding: 5px;
opacity: 0;
}
.overlay:target .close {
animation: slideDownFade .5s .5s forwards;
}
/* 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>- Di dalam tag body silahkan masukkan kode untuk menampilkan thumbnail gambar.
<a href="#gambar-1">
<img class="thumb" src="Link Gambar Disini" alt="nelayan kode" />
</a>Silahkan ganti link gambar dengan link gambar sobat sendiri
- Untuk menampilkan popup gambar tambahkan kode berikut di bawah kode thumbnail gambar.
<div class="overlay" id="gambar-1">
<a href="#" class="close">
<svg style="width:47px;height:47px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z" />
</svg>
</a>
<img src="Link Gambar Disini" alt="Nelayan Kode">
</div>Pastikan link gambar pada popup sama dengan link gambar pada thumbnail
- Jika semua kode di atas digabungkan maka struktur kodenya kurang lebih sebagai berikut.
Final Kode Program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mainwrapper {
background: #fefefe;
display: flex;
width: 100%;
height: 650px;
justify-content: center;
align-items: center;
}
img.imgthumb {
width: 150px;
border-radius: 10px;
}
/* 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: 9999;
transition: .8s;
text-align: center;
padding: 150px 0;
}
.overlay:target {
width: auto;
height: auto;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .7);
}
.overlay img {
max-height: 100%;
box-shadow: 2px 2px 7px rgba(0, 0, 0, .5);
}
.overlay:target img {
animation: zoomDanFade 1s;
}
.overlay .close {
position: absolute;
top: 2%;
right: 2%;
margin-left: -20px;
color: white;
text-decoration: none;
line-height: 14px;
padding: 5px;
opacity: 0;
}
.overlay:target .close {
animation: slideDownFade .5s .5s forwards;
}
/* 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>
<!-- Menampilkan thumbnail gambar -->
<a href="#gambar-1">
<img class="thumb" src="Link Gambar Disini" alt="nelayan kode" />
</a>
<!-- Menampilkan popup gambar -->
<div class="overlay" id="gambar-1">
<a href="#" class="close">
<svg style="width:47px;height:47px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z" />
</svg>
</a>
<img src="Link Gambar Disini" alt="Nelayan Kode">
</div>
</body>
</html>Output Program
.png)
Demo Popup Image Lighbox
Untuk melihat demonya secara live silahkan klik link download di bawah ini.
Demikian tutorial cara membuat Popup Image Lightbox dengan HTML dan CSS Tanpa JavaScript, semoga bermanfaat. Dan jangan lupa untuk memberi dukungan dengan cara mentraktir kopi di trakteer.id atau dengan cara share postingan kali ini.
4 comments