Seperti yang kita tau, untuk membuat keterangan pada sebuah gambar, kita hanya harus menambahkan atribut alt pada tag image tersebut. dan keterangannya akan muncul mengambang ketika pointer menyorot gambar. Tapi, jika anda ingin membuat sebuah keterangan dengan tampilan yang berbeda, anda harus mencoba efek yang satu ini.
Caption atau keterangan akan muncul dengan animasi fade atau blur yang cantik. Demonya bisa anda lihat dibawah ini:
Ini adalah lambang sekolah SMK MJPS2 Tasikmalaya.
Oke, langsung aja ke tutorial, untuk membuatnya silahkan ikuti beberapa langkah dibawah ini:
- Masuk ke menu rancangan dan Pilih Edit HTML
- Masukan kode dibawah ini sebelum kode </head> (gunakan Ctrl+F untuk lebih memudahkan pencarian).
<script type="text/javascript">
$(window).load(function(){
//for each description div...
$('div.description').each(function(){
//...set the opacity to 0...
$(this).css('opacity', 0);
//..set width same as the image...
$(this).css('width', $(this).siblings('img').width());
//...get the parent (the wrapper) and set it's width same as the image width... '
$(this).parent().css('width', $(this).siblings('img').width());
//...set the display to block
$(this).css('display', 'block');
});
$('div.wrapper').hover(function(){
//when mouse hover over the wrapper div
//get it's children elements with class descriptio
//and show it using fadeTo
$(this).children('.description').stop().fadeTo(500, 0.7);
},function(){
//when mouse out of the wrapper div
//use fadeTo to hide the div
$(this).children('.description').stop().fadeTo(500, 0);
});
});
</script>
<style>
div.wrapper{
position:relative; /* important(so we can absolutely position the description div */
}
div.description{
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
left:0px;
display:none; /* hide it */
/* styling bellow */
background-color:black;
font-family: 'tahoma';
font-size:15px;
color:white;
}
div.description_content{
padding:10px;
}
</style>
- Setelah selesai, simpan template.
- Upload gambar pada area posting. Setelah gambar masuk, edit dalam mode HTML
- Ini yang paling penting. Sisipkan kode berikut pada tag img gambar.
<div class="wrapper">
<img src="url gambar anda" /><div class="description">
<div class="description_content">
Masukkan keterangan gambar disini</div>
<br /></div>
</div> Gambar berwarna merah isi dengan url gambar, sementara yang berwarna biru silahkan isi dengan keterangan dari gambar. Cukup rumit memang, tapi hasilnya hebring!
Post a Comment