Membuat Keterangan Pada Gambar Dengan JQuery

Maksud dari tutorial kali ini adalah membuat keterangan pada gambar yang kita tampilan. Manakala cursor diletakkan tepat di atas gambarnya, maka akan muncul deretan tulisan di bagian atas dan bawah gambar tersebut sebagai penjelasan dari gambar yang dimaksud. Dengan adanya efek transparan pada background tulisan keterangannya, membuat gambar dan tulisannya semakin menarik untuk dilihat dan menjadi suatu perpanduan gambar dan tulisan yang kontras. Untuk DEMOnya bisa anda lihat di sini.

Untuk membuatnya, langkahnya adalah :

1.   Rancangan -> Tambah Gadget ->
      pilih HTML/JavaScript.
2.   Letakkan ke dalam kontennya,
      kode berikut ini :

<div class="img"><div class="heading"><span>Mekkah Al-Mukarromah</span></div><img src="http://i1128.photobucket.com/albums/m486/syamsudin1/mekkahal-mukarromah.jpg" width="360px" height="270px" alt="" /><br /> <div class="caption"><span>Kewajiban untuk menunaikan ibadah haji bagi yang mampu</span></div></div>

KETERANGAN :

Gantilah gambarnya dengan gambar milik anda.
Sesuai juga ukuran gambar anda tersebut pada kode

width="360px" height="270px"

Ganti juga tulisan keterangan atas & bawahnya
dengan kalimat yang anda inginkan.

3.   Lalu masuklah ke Edit HTML
4.   Cari kode </b:skin>
5.   Letakkan di atas kode </b:skin> ini
      kode yang di bawah ini :

.img {
/* relative position, so that objects in it can be positioned inside this container */
position:relative;
font-family:arial;
/* hide those extra height that goes beyong the size of this container */
overflow:hidden;
border:5px solid #000000;
width:360px;
height:270px;
}
.img .heading,
.img .caption {
/* position inside the container */
position:absolute;

KETERANGAN :

Ubah ukuran gambarnya, sesuaikan
dengan ukuran gambar anda pada kode :

width:360px;

height:270px;

Ubah juga warna, tinggi & lebar background
transparantnya pada kode :

background:#0000ff;

height:50px;

width:360px;

6.   Cari lagi kode </head>
7.   Letakkan di atas kode </head> ini
      kode yang berikut ini,
      lalu simpan template anda.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript">
</script>

<script>
$(document).ready(function () {

// transition effect
style = 'easeOutQuart';

// if the mouse hover the image
$('.img').hover(
function() {
//display heading and caption
$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
},

function() {
//hide heading and caption
$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
}
);

});
</script>

Selamat mencoba, good luck!

Source: syamsudinnamaku.blogspot.com