How to make block animation with hover image?

Only the block with the image is animated, the rest should be on top of the bottom block.

Now there is a shift

Code - Fiddle

* { box-sizing: border-box; padding: 0; margin: 0; } .items { display: flex; flex-wrap: wrap; padding: 15px; } .item { max-width: 300px; border: 1px solid #ccc; margin: 2% 0; } .item-pict { height: 100px; padding: 15px; transition: height .3s ease; } .item-pict>img { max-width: 100%; max-height: 100%; width: 100%; object-fit: cover; } .item-content { padding: 15px; background: #f7f7f7; } .item:hover .item-pict { height: 200px; } 
 <div class="items"> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> </div>

    1 answer 1

     * { box-sizing: border-box; padding: 0; margin: 0; } .items { display: flex; flex-wrap: wrap; padding: 15px; } .item { max-width: 300px; height: 200px; border: 1px solid #ccc; margin: 2% 0; position: relative; transition: all .4s ease; } .item-pict { height: 100px; padding: 15px; transition: all .4s ease; } .item-pict>img { max-width: 100%; max-height: 100%; width: 100%; object-fit: cover; } .item-content { font: 16px Arial, sans-serif; padding: 20px; position: absolute; bottom: 0; width: 100%; } .item:hover .item-pict { height: 200px; } .item:hover { color: rgba(255, 255, 255, .8); text-shadow: 0px 1px 2px rgba(0, 0, 0, 1); } 
     <div class="items"> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> <div class="item"> <div class="item-pict"> <img src="https://placeimg.com/480/480/any" alt=""> </div> <div class="item-content"> <h2>Title</h2> <p>Text text text text</p> </div> </div> </div>