Caption on image with css3 n jquery

Membuat keterangan pada gambar dengan CSS3 dan jquery, pembuatan Caption pada gambar dengan jquery ini, membuat suasana gambar tampak indah dan berbeda dengan sentuhan jquery semua terasa lebih indah apalagi dengan tambahan CSS3 pasti lebih menarik seperti apa bentuk nya silahkan simak demonya
DEMO
Silahkan sorot gambar yang ada di postingan tersebut dan lihat Effect Caption yang keluar nah seperti itulah efek caption nya, bagus gak menurut agan. . . .? ok setelah puas melihat demo Caption image with css3 and jquery sekarang mari segera terapkan di blog anda masing²

1. Baca: Cara masuk ke dalam template
2. Cari Kode </head>
3. Letakan Script / kode di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() {
    $('div.demo').hover(function() {
       // Set the z-index to 10, so the description will always appear on the top
       $(this).css('z-index', 10).find('div.demohover').delay(200).slideDown('slow');
    }, function() {
        $(this).find('div.demohover').slideUp('slow', function() {
            // Set the z-index to it's default when mouseleave
            $(this).parent().css('z-index', 1);
        });
    });
});
</script>

Nah setelah script nya di simpan silahkan cari kode ]]></b:skin> Lagi Lalu simpan kode di bawah ini di atas kode ]]></b:skin>

.demo {
  position:relative;
  float:left;
  width:180px;
  height:128px;
  margin:10px;
  background-color: #0a0;
  border:1px solid #060;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
  box-shadow:0px 1px 2px rgba(0,0,0,0.2);   
}
.demo img {
  width:160px;
  height:109px !important;
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;   
}
.demo .demohover {
  width:190px;
  height:auto;
  background-color: #0C0;
  -webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 5px rgba(0,0,0,0.2);
  box-shadow:0px 1px 5px rgba(0,0,0,0.2);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  position:absolute;
  top:-5px;
  left:-5px;
  display:none;
}
.demo .demohover h2 {
  font:bold 14px Agency FB,Arial,Sans-Serif;
  color:#222;
  margin:128px 10px 5px;
  text-transform:uppercase;
}
.demo .demohover p {
  margin:0px 10px 10px;
  font:normal 12px Arial,Arial,Sans-Serif;
}

Nah sekarang Langkah terakhir yaitu pemanggilannya caranya cukup mudah anda tinggal pilih mau di letakan dimana jika di postingan maka silahkan anda buat entri baru lalu beralih dari Mode Compose ke Mode Edit HTML lalu jika anda ingin gunakan di sidebar silahkan anda masuk di

1. Rancangan
2. Klik Tambah Gadget
3. Klik HTML/Javascript
4. paste script / kode di bawah ini,, di kotak ke dua ( kotak bagian bawah )

<div class="demo">
   <div class="demohover">
       <h2>Cewek Semok Abis</h2>
       <p>
Teks anda disini
       </p>
   </div>
    <img src="Disini URL gambar" alt="deskripsi gambar" />
</div>
<div class="demo">
   <div class="demohover">
       <h2>Koleksi Foto Cewek Imut</h2>
       <p>
Teks anda disini
       </p>
   </div>
    <img src="Disini URL gambar" alt="deskripsi gambar" />
</div>
<div class="demo">
   <div class="demohover">
       <h2>Korea Lover's</h2>
       <p>
Teks anda disini
       </p>
   </div>
   <img src="Disini URL gambar" alt="deskripsi gambar" />
</div>

Sedikit penjelasan lagi, jika anda letakan di sidebar maka gambarnya cukup 2 atau 1 saja karena sidebar kan kecil jadi kalau banyak - banyak gambar yang di muat maka akan kelihatan kurang rapi, nah untuk anda yang ingin menggunakan di postingan silahkan gunakan sebanyak - banyaknya sesuai keinginan anda, nah jika anda ingin menambahkan gambarnya lagi silahkan anda perhatikan kode seperti ini

<div class="demo"> <!--ini kode awal -->
   <div class="demohover">
       <h2>Cewek Semok Abis</h2>
       <p>
TEKS ANDA DISINI
       </p>
   </div>
    <img src="Disini URL gambar" alt="deskripsi gambar" />
</div> <!--ini kode akhir atau penutup -->

Jadi jika anda ingin tambahkan image / gambar nya silahkan anda tambahkan kode seperti itu lagi dan jika ingin mengurangi silahkan hapus kode seperti itu, perhatikan kode Awal dan kode penutup nya, karena itu yang sangat penting, nah jika sudah silahkan Anda Simpan dan lihat hasilX. Sumber