Изображение при наведении мыши заменяется другой и увеличивается
 

Здравствуйте, помогите, пожалуйста,создать правильный скрипт. Нужно чтобы картинка при наведении заменилась другой, т.е. первая исчезает, а вторая в этот момент появляется и увеличивается на том же месте, как на сайте мегафона внизу есть подобных 3 изображения. Я смог только css от туда взять, а как дальше быть не знаю. Может есть какой-нибудь плагин jquery, javascript или с css надо поработать или что то еще? Вот что я от туда взял:

.img {
   background:url('первое_изображение.jpg');
   height: 300px;
   width: 300px;
}
.img:hover {
   background:url('второе_изображение.jpg');
   height: 500px;
   width: 500px;
}

<div class="img"></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 */
}

<div class="image-block">
<img class="image-up" src="../images/первое_изображение.jpg" />
<img class="image-down" src="../images/второе_изображение.jpg />
</div>

а также плавное увеличение:

#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;
}

$(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");
        });
    });

всё делается только по отдельности, а как совместить, чтобы происходило и плавная смена и плавное увеличение вместе?

Делал подобное за 20 минут с помощью двух вызовов transitions, плавная смена с помощью transform, другая с помощью width, margin, left - надо просто отдельно указывать transitions на эти свойства. Почитать

А пример написания можно увидеть?:)

http://jsfiddle.net/CCkr4/3/ - Не думал, что будет мерцание, но я думаю его можно убрать. http://jsfiddle.net/CCkr4/4/ :)

Смысл то в том, что изображение увеличенное в css теряет качество, вот и надо подставить второе изображение так, чтобы оно было размером больше чем первое. А может даже не само изображение надо увеличить, а рамку вокруг, т.е. первоначально показать первое изображение, а при наведении мыши второе не полное, где постепенно будет расширяться рамка.

Что мешает взять изображение больше (по размерам, как второе) и просто уменьшить для начального?
http://jsfiddle.net/kazabr/j2mjN/3/embedded/result/

Мешает то, что нужно два изображения вставить...

.img {
   background:url('первое_изображение.jpg');
   height: 300px;
   transition: all 0.5s;
   width: 300px;
}
.img:hover {
   background:url('второе_изображение.jpg');
   height: 500px;
   margin: -100px 0% 0% -100px;
   position: absolute;
   width: 500px;
}

<div class="img"></div>

Ruslan_xDD, спасибо. Идея классная, только вот один маленький нюанс - как сделать, так чтобы картинка, что ниже находится, не пропадала, когда наводишь на ту, что выше находится???

то есть поставил 5 картинок:
<div class="img-1"></div>
<div class="img-2"></div>
<div class="img-3"></div>
<div class="img-4"></div>
<div class="img-5"></div>

css прописал:

.img-1 {
   background:url(../images/banners/airo.jpg);
  border-radius: 5px 5px 5px 5px;
    box-shadow: 2px 2px 2px #CCCCCC;
    height: 70px;
    transition: all 0.4s ease 0s;
    width: 250px;
	margin-bottom: 10px;
}
.img-1:hover {
   background:url(../images/banners/airo-2.jpg);
   height: 90px;
   margin: -20px 0% 0% -10px;
   position: absolute;
   width: 270px;
}

.img-2 {
   background:url(../images/banners/sea.jpg);
  border-radius: 5px 5px 5px 5px;
    box-shadow: 2px 2px 2px #CCCCCC;
    height: 70px;
    transition: all 0.4s ease 0s;
    width: 250px;
	margin-bottom: 10px;
}
.img-2:hover {
   background:url(../images/banners/sea-2.jpg);
   height: 90px;
   margin: -20px 0% 0% -10px;
   position: absolute;
   width: 270px;
}

.img-3 {
   background:url(../images/banners/auto.jpg);
  border-radius: 5px 5px 5px 5px;
    box-shadow: 2px 2px 2px #CCCCCC;
    height: 70px;
    transition: all 0.4s ease 0s;
    width: 250px;
	margin-bottom: 10px;
}
.img-3:hover {
   background:url(../images/banners/auto-2.jpg);
   height: 90px;
   margin: -20px 0% 0% -10px;
   position: absolute;
   width: 270px;
}

.img-4 {
   background:url(../images/banners/iron.jpg);
  border-radius: 5px 5px 5px 5px;
    box-shadow: 2px 2px 2px #CCCCCC;
    height: 70px;
    transition: all 0.4s ease 0s;
    width: 250px;
	margin-bottom: 10px;
}
.img-4:hover {
   background:url(../images/banners/iron-2.jpg);
   height: 90px;
   margin: -20px 0% 0% -10px;
   position: absolute;
   width: 270px;
}

.img-5 {
   background:url(../images/banners/multi.jpg);
  border-radius: 5px 5px 5px 5px;
    box-shadow: 2px 2px 2px #CCCCCC;
    height: 70px;
    transition: all 0.4s ease 0s;
    width: 250px;
	margin-bottom: 10px;
	display:block;
}
.img-5:hover {
   background:url(../images/banners/multi-2.jpg);
  height: 90px;
   margin: -20px 0% 0% -10px;
   position: absolute;
   width: 270px;
}

Спасибо за любую инфу!