Всё бы ничего, но див сидит среди других дивов в одном ряду. Т.е. имеем, скажем, 5 div-ов. Наводишь на 2й слева мышкой - поменялась картинка и его ширина изменилась таким образом, чтобы сдвинуть остальные 3 справа в сторону. Я использую это:
.div1 {
background: url(/img/1.png) no-repeat;
width: 100px;
height: 400px;
}
.div1:hover {
background: url(/img/8.png) no-repeat;
width: 300px;
transition-duration: 0.5s;
}
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
И идёт у меня 5 дивов. Cтили, соответственно, для каждого прописаны. Но все дивы выстраиваются друг под другом. Если назначить им { float: left;} то они становятся так, как нужно, но! перестаёт работать смента картинок и изменение размера. Как допилить? И как можно добавить в ту часть, которая появляется из-за увеличения ширины дива - всплывающий текст?