All anything, but the div sits among other divs in the same row. Those. we have, say, 5 divs. You hover on the 2nd left with the mouse - the picture has changed and its width has changed in such a way as to move the other 3 to the right. I use this:

.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>

And I have 5 divines. Styles, respectively, for each registered. But all the divas line up under each other. If you assign {float: left;} to them, then they become what you need, but! The picture and size change stops working. How to finish? And how can you add to the part that appears due to the increase in diva width - the pop-up text?

  • Look flex-box habrahabr.ru/post/257253 , maybe this will help you. if the link is not valid, “there is no need to indicate the most important thing here”, therefore there will be no other way to specify. although the most important thing is already indicated: flex-box. - Vadim
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

From the addition of float: left nothing should break. See the example http://jsfiddle.net/y9hqdzpd/

 <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div>

css

 .item{width: 100px; height: 200px; background: url('http://upload.wikimedia.org/wikipedia/commons/c/c3/Aurora_as_seen_by_IMAGE.PNG'); transition-duration: 0.5s; float: left;} .item:hover{width: 200px; background: url('http://www.thinkstockphotos.co.uk/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg');}

and compare with your code. Perhaps you have something else spelled out.