Selamat siang, kembali lagi lagi dengan saya. Hari ini saya ingin menunjukkan kepada sobat bagaimana untuk membuat efek lightbox yang rapi hanya menggunakan CSS. Idenya adalah untuk memiliki beberapa thumbnail yang dapat diklik, dan setelah diklik, masing-masing gambar akan ditampilkan besar. Menggunakan transisi CSS dan animasi, kita bisa membuat gambar besar muncul dengan cara elegant.
Dengan bantuan dari
pseudo-class : target , kita akan mampu untuk menampilkan gambar lightbox dan menavigasi melalui thumbnail.
Harap dicatat bahwa ini hanya akan bekerja dengan browser yang mendukung: target pseudo class.
Markup
Kami ingin menunjukkan satu set thumbnail, masing-masing memiliki judul yang akan muncul saat di hover (sentuh mouse). Ketika mengklik thumbnail, kami ingin menunjukkan versi besar gambar dalam
overlay content yang akan membuat background sedikit lebih buram. Jadi, mari kita menggunakan
unordered list di mana setiap item daftar akan berisi thumbnail dan overlay dengan versi besar pada setiap gambar:
<ul class="lb-album">
<li>
<a href="#image-1">
<img src="images/thumbs/1.jpg" alt="image01">
<span>Pointe</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="images/full/1.jpg" alt="image01" />
<div>
<h3>pointe <span>/point/</h3>
<p>Dance performed on the tips of the toes</p>
<a href="#image-10" class="lb-prev">Prev</a>
<a href="#image-2" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>
<li>
<!-- ... -->
</li>
</ul>
Anchor untuk thumbnail akan menunjuk ke elemen dengan id gambar-1 yang merupakan tag div dengan class lb-overlay. Untuk menavigasi melalui gambar, kita akan menambahkan dua elemen link yang mengarah ke gambar sebelumnya dan berikutnya (besar).
Untuk "menutup" lightbox, kita akan klik pada link dengan tag div class lb-close yang menunjuk ke elemen dengan ID halaman yang tag <body>.
CSS
.lb-album{
width: 900px;
margin: 0 auto;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
float: left;
margin: 5px;
position: relative;
}
.lb-album li > a,
.lb-album li > a img{
display: block;
}
.lb-album li > a{
width: 150px;
height: 150px;
position: relative;
padding: 10px;
background: #f1d2c2;
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
border-radius: 4px;
}Judul untuk setiap thumbnail akan terlihat dan kita akan menambahkan transisi untuk opacity yang akan berubah menjadi 1. Kita akan menggunakan radial gradient sebagai background::
.lb-album li > a span{
position: absolute;
width: 150px;
height: 150px;
top: 10px;
left: 10px;
text-align: center;
line-height: 150px;
color: rgba(27,54,81,0.8);
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
font-size: 24px;
opacity: 0;
background:
radial-gradient(
center,
ellipse cover,
rgba(255,255,255,0.56) 0%,
rgba(241,210,194,1) 100%
);
transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
opacity: 1;
}Overlay akan memiliki gradien radial yang sama dan kita akan mengatur posisinya untuk tetap
{position:fixed;}, dengan tinggi dan lebar nol:
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
background:
radial-gradient(
center,
ellipse cover,
rgba(255,255,255,0.56) 0%,
rgba(241,210,194,1) 100%
);
}Setelah kita mengklik thumbnail, kami akan menutupi seluruh layar dengan overlay, tapi pertama-tama, mari kita lihat tag div untuk judul utama dan deskripsi:
.lb-overlay > div{
position: relative;
color: rgba(27,54,81,0.8);
width: 550px;
height: 80px;
margin: 40px auto 0px auto;
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
}
.lb-overlay div h3,
.lb-overlay div p{
padding: 0px 20px;
width: 200px;
height: 60px;
}
.lb-overlay div h3{
font-size: 36px;
float: left;
text-align: right;
border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
font-size: 16px;
font-family: Constantia, Palatino, serif;
font-style: italic;
}
.lb-overlay div h3 span{
display: block;
line-height: 6px;
}
.lb-overlay div p{
font-size: 14px;
text-align: left;
float: left;
width: 260px;
}Kita akan memposisikan elemen link untuk menutup lightbox yang benar-benar di atas gambar:
.lb-overlay a.lb-close{
background: rgba(27,54,81,0.8);
z-index: 1001;
color: #fff;
position: absolute;
top: 43px;
left: 50%;
font-size: 15px;
line-height: 26px;
text-align: center;
width: 50px;
height: 23px;
overflow: hidden;
margin-left: -25px;
opacity: 0;
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}Gambar akan memiliki ketinggian maksimum 100%. Itu salah satu cara untuk membuat gambar agak reponsive. Kita juga akan menambahkan transisi untuk tingkat opacity. Setelah kita "membuka" gambar besar, opacity akan mendapatkan animasi. Kita akan lihat nanti bagaimana kita dapat menggunakan animasi untuk gambar.
.lb-overlay img{
max-height: 100%;
position: relative;
opacity: 0;
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
transition: opacity 0.5s linear;
}Elemen navigasi:
.lb-prev, .lb-next{
text-indent: -9000px;
position: absolute;
top: -32px;
width: 24px;
height: 25px;
left: 50%;
opacity: 0.8;
}
.lb-prev:hover, .lb-next:hover{
opacity: 1;
}
.lb-prev{
margin-left: -30px;
background: transparent url(../images/arrows.png) no-repeat top left;
}
.lb-next{
margin-left: 6px;
background: transparent url(../images/arrows.png) no-repeat top right;
}Ketika kita klik pada anchor thumbnail, maka akan terlihat versi besar setiap gambar degan tag div class lb-overlay. Jadi, untuk mengatasi elemen ini kita dapat menggunakan pseudo class :target. Kita akan menambahkan padding untuk overlay dan "stretch" atas seluruh viewport dengan menetapkan lebar dan tinggi auto dan mengatur kanan dan bawah 0px.
.lb-overlay:target {
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 100px;
}Sekarang kita juga akan mengatur opacity gambar dan link penutu 1. Gambar akan kita beri efek
" fade in", karena kita telah menentukan transisi:
.lb-overlay:target img,
.lb-overlay:target a.lb-close{
opacity: 1;
}
Mari kita lihat alternatif 2 yang kita gunakan dalam demo 1 dan demo 2.
.lb-overlay:target img {
animation: fadeInScale 1.2s ease-in-out;
}
@keyframes fadeInScale {
0% { transform: scale(0.6); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}Dalam demo kedua kita akan menciptakan efek sebaliknya, yaitu skala gambar ke bawah:
.lb-overlay:target img {
animation: scaleDown 1.2s ease-in-out;
}
@-webkit-keyframes scaleDown {
0% { transform: scale(10,10); opacity: 0; }
100% { transform: scale(1,1); opacity: 1; }
}Mungkin cukup sekian tutorial mengenai CSS3 Lightbox! Saya harap Anda menikmati tutorial ini dan menemukan inspirasi!