Плавное увеличение и смена картинки на другую при наведении мыши - Joomla 2.5: Общие вопросы

$(document).ready(function() {
        var cont_left = $("#container").position().left;
        $("a img").hover(function() {
            // приближение
            $(this).parent().parent().css("z-index", 1);
            $(this).animate({
               height: "250",
               width: "250",
               left: "-=50",
               top: "-=50"
            }, "fast");
        }, function() {
            // отдаление
            $(this).parent().parent().css("z-index", 0);
            $(this).animate({
                height: "150",
                width: "150",
                left: "+=50",
                top: "+=50"
            }, "fast");
        });<p></p>

        $(".img").each(function(index) {
            var left = (index * 160) + cont_left;
            $(this).css("left", left + "px");
        });
    });

#container{
text-align: center;
position: absolute;
left: 240px;
margin-top: 150px;
width: 790px;
}
.img{
position: fixed;
z-index: 0;
}
.end{
margin-right: 0;
}
.clear{
clear: both;
}
.img a img{
position: relative;
border: 0 solid #fff;
}

 box-shadow: 0 0 30px #969696;

}
.img a img:hover {     box-shadow: 0 0 20px #2c2c2c; 

}
.img a img:hover { transform: rotate(-7deg); {

<div class="image-block">
   <img class="image-up" src="../images/1.jpg" />
   <img class="image-down" src="../images/2.jpg />
</div>

.image-block {
   display: inline-block;
   padding: 0;
   margin: 0;
   background-position: center center;
   background-repeat: no-repeat;
}

.image-up, .image-down {
   border: 0;
   margin: 0;
   padding: 0;
}

.image-up {
   opacity: 1.0;
   filter: alpha(opacity=99); /* IE */
   display: block;
   position: absolute;
   z-index: 100;
   transition-duration: 0.96s;
   -webkit-transition-duration: 0.96s;
   -moz-transition-duration: 0.96s;
   -o-transition-duration: 0.96s;
   -ms-transition-duration:  0.96s; /* IE9+ */
}

.image-up:hover {
   opacity: 0.00;
   filter: alpha(opacity=00); /* IE */
}

$('#divID').css('width', '300px');

<div class="image-block">
   <img src="../images/10.jpg" />
   <img class="ihover" src="../images/11.jpg" />
</div>
<div class="image-block">
   <img src="../images/20.jpg" />
   <img class="ihover" src="../images/21.jpg" />
</div>
<div class="image-block">
   <img src="../images/30.jpg" />
   <img class="ihover" src="../images/31.jpg" />
</div>

.image-block {width:20px; height:20px;}
.image-block img {width:100%; height:100%;}
.ihover {display:none;}

jQuery('.image-block').hover(
  function () {
	jQuery(this).stop(false, true).animate({width: '50px', height: '50px'}, 700);
	jQuery(this).find('img').fadeToggle(700);
  }, 
  function () {
	jQuery(this).stop(false, true).animate({width: '20px', height: '20px'}, 700);
	jQuery(this).find('img').fadeToggle(700);
  }
);

jQuery('.image-block').hover(
  function () {
	jQuery(this).stop(false, true).animate({width: '50px', height: '50px'}, 700).queue(function () {
		jQuery(this).find('img').fadeToggle(700);
	});
  }, 
  function () {
	jQuery(this).stop(false, true).animate({width: '20px', height: '20px'}, 700).queue(function () {
		jQuery(this).find('img').fadeToggle(700);
	});
  }
);