There is a list of products in the form of blocks with display: inline-block . It is necessary when you hover the cursor on the block to increase it, but that the other blocks do not move. Something like this: wildberries.ru/catalog/20/women.aspx

I tried to copy the styles from there, but something didn’t work. I do not quite understand how it works.

Now I have something like this:

 #goods { width: 330px } .item { position: relative; float: left; width: 80px; height: 140px; margin: 5px; padding: 8px; border: solid 1px #999; overflow: hidden; text-align: center; } .item:hover { height: 180px; } p { margin: 3px } 
 <div id="goods"> <div class="item"> <img src="http://placehold.it/80x120" /> <p>Cool item</p> <button>buy</button> </div> <div class="item"> <img src="http://placehold.it/80x120" /> <p>Cool item</p> <button>buy</button> </div> <div class="item"> <img src="http://placehold.it/80x120" /> <p>Cool item</p> <button>buy</button> </div> <div class="item"> <img src="http://placehold.it/80x120" /> <p>Cool item</p> <button>buy</button> </div> <div class="item"> <img src="http://placehold.it/80x120" /> <p>Cool item</p> <button>buy</button> </div> </div>

    2 answers 2

    Understood.

    Inside .item[position=relative] add the .wrap[position:absolute;overflow:hidden] block and change the size and z-index:2 by :hover

    • Size does not need to be changed. - Qwertiy ♦

    Just on the hover, change the overflow to visible, leaving the dimensions unchanged. Inside the element, put another one, which will have a white background. You will also need to use z-index if you are going to overlap the elements that are in the markup before.