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

[DarAmal]

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

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