jQuery Animation - Hover Image Caption

Artikel kali ini kita akan membahas cara memberikan caption atau deskripsi pada gambar dengan bantuan jQuery untuk memberikan efek animasinya. Ketika kita mengarahkan pinter mouse (hover) diatas gambar maka caption yang tadinya disembunyikan akan dimunculkan dengan efek slideup. Pergeseran caption juga akan menggeser posisi gambar keatas. Dan ketika pointer mouse di geser menjauh dari gambar maka caption akan kembali turun dengan efek slidedown hingga tersembunyi, sedangkan gambar akan kembali turun pada posisi semula. Demikian sekilas gambaran cara kerja jQuery Animation - Hover Image Caption, namun harus diperhatikan bahwa script jQuery ini tidak bekerja dengan baik pada framework jQuery versi 1.7.1. Silahkan lihat demo dibawah ini untuk melihat hasil akhirnya.

Demo jQuery Animation Hover Image Caption

Skenario HTML

Skenario kode HTML dibawah ini silahkan sesuaikan saja dengan kebutuhan. Hal terpenting adalah class figure-caption dan class figure-caption-text.

<div class="figure-caption">
 <a href="http://modification-blog.blogspot.com/" title="Blogger Tune-Up" target="_blank">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHsfdYFGsZ3OT6zRV5tzHTRQaheTAJ2BEbiAKaups-vMoa6g2hYww4LwULVEI8DA-_ELiAWT6HvECZJjvZ0Kpe9H5qGhXsKVj9g4Bna6xHSk8U8-TPyhWTvggGnteD9BK2JVce-djpFhQ/s380/003.jpg"/>
 </a>
 <p class="figure-caption-text">
  Blogger Tune-Up adalah teknologi blog populer yang dipelihara oleh Dede Hendriono. Topik fokus pada web design, tutorial, blogger hack dan sumber inspirasi.
 </p>
</div>

Update! Skenario HTML 5

Terima kasih untuk sahabat blogger Taufik Nurrohman yang telah menambahkan skenario HTML untuk versi 5. Bagi anda yang sudah menerapkan template Blogger versi HTML5 atau bagi penggunan non Blogger yang sudah menggunakan HTML 5, skenario HTML5 dibawah ini cocok bagi yang sangat memperhatikan HTML Typography.

<figure class="figure-caption">
 <a href="http://modification-blog.blogspot.com/" title="Blogger Tune-Up" target="_blank">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHsfdYFGsZ3OT6zRV5tzHTRQaheTAJ2BEbiAKaups-vMoa6g2hYww4LwULVEI8DA-_ELiAWT6HvECZJjvZ0Kpe9H5qGhXsKVj9g4Bna6xHSk8U8-TPyhWTvggGnteD9BK2JVce-djpFhQ/s380/003.jpg"/>
 </a>
 <figcaption class="figure-caption-text">
  Blogger Tune-Up adalah teknologi blog populer yang dipelihara oleh Dede Hendriono. Topik fokus pada web design, tutorial, blogger hack dan sumber inspirasi.
 </figcaption>
</figure>

Skenario CSS

Skenario kode CSS dibawah ini silahkan sesuaikan dengan kebutuhan anda, dari mulai warna, tebal garis, lebar bingkai dan lain sebagainya. Hal terpenting adalah "position: relative" karena gambar akan di geser ke atas dengan margin negatif. Selain itu "overflow: hidden" digunakan untuk menghilangkan caption pada saat pointer mouse belum masuk ke area gambar. Sedangkan "width: 380px" silahkan disesuaikan dengan kebutuhan.

.figure-caption {
 position: relative;
 margin: 10px auto;
 border: 3px solid #999999;
 overflow: hidden;
 -moz-border-radius: 2px;
 -khtml-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 width: 380px;
}

.figure-caption-text {
 padding: 5px 10px;
 background-color: #333333;
 color: #eeeeee;
 border-top: 1px solid #666666;
 margin-top:-3px;
}

Skenario jQuery

Perhatikan script jQuery dibawah ini dengan seksama, namun sebelum itu jangan lupa memastikan bahwa framework jQuery telah terpasang pada halaman tersebut.

jQuery(document).ready(function($) {
 $('div.figure-caption').each(function(i) {
  var gambar_ = $('img', this);
  var tinggi_gambar = gambar_.attr('height');
  var tinggi_caption = $('p', this).outerHeight();
  $(this).height(tinggi_gambar);
  $(this).hover(function() {
   gambar_.animate({marginTop : -tinggi_caption}, 500);
  }, function() {
   gambar_.animate({marginTop : '0'}, 500);
  });
 });
});

Fungsi each() digunakan untuk mengumpulkan keterangan gambar pada halaman yang sedang diakses. Setelah itu, ketinggian gambar dan deskripsi gambar akan disimpan. Selanjutnya, ketingian div.figure-caption akan ditetapkan sesuai dengan ketinggian gambar, sehingga deskripsi akan disembunyikan dan tidak akan terlihat.

Fungsi hover() diakses ketika kita memindahkan pointer mouse diatas sebuah gambar, gambar tersebut akan diubah margin atasnya menjadi negatif yang sesuai dengan ketinggian deskripsi (caption), sehingga gambar akan bergerak keatas dan terpotong setinggi deskripsi. Deskripsi (caption) gambar akan set margin atasnya pada posisi 0. Dan semua pergerakan tersebut, baik itu gambar ataupun deksripsi di tentukan oleh jQuery fungsi animate().

Unduh jQuery Animation Hover Image Caption

Framewok jQuery

Ini adalah hal wajib jika anda ingin menggunakan fungsi-fungsi jQuery.

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

Selamat mencoba dan semoga berhasil. Happy Blogging :)