Simple Photo Slide Caption Menggunakan jQuery

Membuat slide caption menggunakan jQuery ini sangat mudah. Cukup dengan mengkombinasikan trik-trik berikut:

• relative + absolute positioning
• .hover() – jQuery API
• .slideToggle() – jQuery API
• beberapa property CSS3 untuk mempercantik tampilan dengan cepat

Yang diperlukan adalah susunan markup ini:

<div>
<img src="images/200x300.jpg" alt="ini contoh foto" />
<p>Ini caption photonya. Dibuat panjang juga ngga apa2, height-nya diset auto.</p>
</div>

Lalu dengan trik relative + absolute positioning, diset posisinya:

.photo-wrap{
float:left;
width:200px;
height:300px;
padding:5px;
border:1px solid #efefef;
position:relative;
margin:40px 0;
}

p.caption{
width:190px;
padding:5px;
position:absolute;
bottom:5px;
left:5px;
background:rgba(0,0,0,0.7);
color:#fff;
}

Oke, sekarang semua elemen sudah berada di posisi-nya masing-masing. Sekarang, “sembunyikan” captionnya dengan menambahkan property display:none pada elemen p.caption sehingga property lengkap p.caption diatas menjadi seperti ini:

p.caption{
width:190px;
padding:5px;
position:absolute;
bottom:5px;
left:5px;
background:rgba(0,0,0,0.7);
color:#fff;
display:none;
}

Sekarang, mari berkreasi menggunakan jQuery. Hubungkan halaman ke file jQuery, lalu gunakan hover() dan slideToggle(). Logikanya, ketika mouse meng-hover elemen .photo-wrap (menggunakan hover()) jQuery akan mengeksekusi efek slideToggle(). ketika mouse keluar dari elemen .photo-wrap, jQuery kembali mengeksekusi slideToggle() agar p.caption kembali disembunyikan.

$(document).ready(function() {
$('.photo-wrap').hover(
function(){$(this).find('.caption').slideToggle();},
function(){$(this).find('.caption').slideToggle();}
);
});

Fungsionalitas sudah oke, sekarang bisa diperindah menggunakan pseudo-class :hover dan property box-shadow-nya CSS3 agar ketika di-hover, muncul drop-shadow yang menciptakan kontras dan menarik perhatian:

.photo-wrap:hover{
cursor:pointer;
-moz-box-shadow:0 0 7px #888; -webkit-box-shadow:0 0 7px #888; box-shadow:0 0 7px #888;
}

That’s all. Anda bisa lihat demo-nya disini:

Demo Simple Photo Slide Caption Menggunakan jQuery