Image Slide Caption dengan jQuery

ketika hidup ini penuh dengan musibah,dan ketika kita terpuruk dengan masalah. maka berdoalah untuk menyelesaikannya

hai kawan kali ini saya akan membuat artikel cara membuat image caption dengan efek jquery slide plus CSS3 . nah seperti yang kalian lihat pada gambar di atas itulah contoh efek tersebut, cara kerja ketika mouse di arahkan pada gambar dan icon kecil di samping bawah kanan akan muncul caption gambar secara slide up dan slideout ketika mouse keluar dari gambar.. seperti halnya pada efek image hover css3.
berikut script dan penerapannya..

jQuery

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

penggunakan script jQuery di atas bila pada template anda belum tersedia.

Javascript

$('imgcaption').hover(function(){
  $('p', this).slideDown(200);
}, function (){
  $('p', this).slideUp(200);
});

HTML

<figure>
  <img src="http://lorempixel.com/400/200/city/">
  <imgcaption>
    <p>ketika hidup ini penuh dengan musibah,dan ketika kita terpuruk dengan masalah. maka berdoalah untuk menyelesaikannya</p>
  </imgcaption>
</figure>

CSS

img {
  vertical-align: middle;
}
figure {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border: 2px solid #000;
  margin: 0;
}
imgcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
imgcaption p {
  margin: 0;
  padding: 15px 30px 15px 20px;
  background: #000;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  display: none;
  text-align: left;
}
imgcaption:after {
  content: 'i';
  display: block;
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  background: #000;
  background: rgba(0, 0, 0, .6);
  border-radius: 50%;
  color: #fff;
  color: rgba(255, 255, 255, .8);
  font-family: serif;
  font-style: italic;
  font-weight: bold;
  line-height: 20px;
  font-size: 15px;
}
imgcaption:hover:after {
  background: #fff;
  color: #000;
}

Nah untuk mempraktekannya silahkan lihat demo livenya di jsfiddle.. pelajari apa yang bisa di lakukan.

View Demo