Rollover Text Pada Gambar Menggunakan Jquery

Live Preview

Masukkan html berikut di dalam posting kalian
<script src="http://au9988.com/shop/js/jquery-1.4.2.min.js" type="text/javascript">
</script>
<style type="text/css">
#RollOverText1 p
{
   padding: 0 10px 10px 10px;
}
#RollOverText1 .caption
{
   float: left;
   position: absolute;
   background: #000000;
   width: 100%;
   opacity: 0;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
   $("#RollOverText1").hover(function()
   {
      var y = $(this).height() - $(".caption", this).height();
      $(".caption", this).css("top", y);
      $(".caption", this).stop().animate({opacity: 0.80},{queue:false, duration:500});
   }, function()
   {
      $(".caption", this).stop().animate({opacity: 0},{queue:false, duration:500});
   });
});
</script>
<div id="RollOverText1">
<div style="text-align: center;">
<img alt="WebDS 1.2 Beta" class="hover" height="300" src="http://images2.wikia.nocookie.net/__cb20110423180417/sims/images/c/ce/Sims_3_High-End_Loft_Stuff_US_Startup_Screen.png" title="WebDS 1.2 Beta" width="400" /></div>
<div class="caption" style="left: 0px; top: 0px;">
<span style="color: white; font-family: Arial; font-size: 13px; font-weight: bold;">WebDS 1.2 Beta</span>
<span style="color: white; font-family: Arial; font-size: 13px;">Program ini dibuat oleh Jimmy Andrian Davius.
<a href="http://www.inike.com/" target="">Untuk Download Klik Di Sini</a></span></div>
</div>

Pada bagian script yang berwarna Merah di rubah dengan alamat gambar yang kalian punya
Contoh: http://google.com/icon.jpg

Lalu pada bagian script yang berwarna orange, ubah sesuai keinginan kalian. Karena script tersebut berisikan deskripsi tentang gambar yang akan kalian berikan jquery Rollover.

Semoga berguna.