Image Transition on Hover - Jquery

When you want to change the image source with transition effect on hover just come here take out the script below. Also i included caption sliding with this transition.

I have used three images on normal state like "baby1.jpg", "baby2.jpg", "baby3.jpg" and for hover state "baby1over.jpg", "baby2over.jpg", "baby3over.jpg".

Note:

#gallery .imgs img - Selector to point the image
over.jpg - addition to image name
img/baby1.jpg - Change the path to where you have images

CSS part :

<style type="text/css">
 .imgs {
 float:left;
 margin:10px;
 padding:5px;
 background:#FF7F7F;
 border:solid 1px #888;
 position:relative;
 width:220px;
 }
 .imgs span {
 display:none;
 width:210px;
 padding:5px;
 background:#ff7f7f;
 opacity:0.8;
 filter:alpha(opacity=80);
 position:absolute;
 left:5px;
 bottom:0;
 }
</style>

Jquery part:

<script type="text/javascript">

$(document).ready(
function(){

 $('#gallery .imgs img').mouseover(function (){
  $(this).fadeOut('slow');
  var src = $(this).attr('src').match(/[^\.]+/) + 'over.jpg';
  $(this).attr('src', src);
  $(this).fadeIn('slow');
  $(this).parent().find('span').slideDown('slow');
 });

 $('#gallery .imgs img').mouseout(function(){
  $(this).fadeOut('slow');
  var src = $(this).attr("src").replace("over", "");
  $(this).attr("src", src);
  $(this).fadeIn('slow');
  $(this).parent().find('span').slideUp('slow');
 });

});

</script>

HTML part:

<div id="gallery">
 <div class="imgs">
  <img src="img/baby1.jpg">
  <span>Your thoughts will decide your way of life</span>
 </div>
 <div class="imgs">
  <img src="img/baby2.jpg">
  <span>If your happiness is inner feeling, no one can change it! Its the gift</span>
 </div>
 <div class="imgs">
  <img src="img/baby3.jpg">
  <span>Dont be stupid by hesitating people who loves you</span>
 </div>
</div>