Good day.
There is a site - http://improveagnc.ru/
When you hover on any product, a description appears. But this description offsets the downstream blocks. If you specify an absolute for a block with a description of the position, then it gets out of the box-shadow and is darkened with the other blocks around.
I want to do as here: https://i-store.net/
Here's what is available at the moment, tell me, please, what can be done.

.products>li.isotope-item:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .excerpt { display: none; } .isotope-item:hover .excerpt { display: block; } 
 <li class="isotope-item post-2531 product type-product status-publish has-post-thumbnail product_cat-apple product_cat-iphone product_cat-iphone-6s first instock shipping-taxable purchasable product-type-simple" style="opacity: 1;"> <div class="shadow"> <div class="image_frame scale-with-grid product-loop-thumb" ontouchstart="this.classList.toggle('hover');"> <div class="image_wrapper"> <a href="http://improveagnc.ru/product/iphone-7/"> <div class="mask"></div><img width="300" height="300" src="http://improveagnc.ru/wp-content/uploads/2018/01/2820-1-300x300.jpg" class="scale-with-grid wp-post-image" alt="" srcset="http://improveagnc.ru/wp-content/uploads/2018/01/2820-1-300x300.jpg 300w, http://improveagnc.ru/wp-content/uploads/2018/01/2820-1-150x150.jpg 150w, http://improveagnc.ru/wp-content/uploads/2018/01/2820-1-180x180.jpg 180w, http://improveagnc.ru/wp-content/uploads/2018/01/2820-1-146x146.jpg 146w, http://improveagnc.ru/wp-content/uploads/2018/01/2820-1-50x50.jpg 50w, http://improveagnc.ru/wp-content/uploads/2018/01/2820-1-75x75.jpg 75w, http://improveagnc.ru/wp-content/uploads/2018/01/2820-1-85x85.jpg 85w, http://improveagnc.ru/wp-content/uploads/2018/01/2820-1-80x80.jpg 80w, http://improveagnc.ru/wp-content/uploads/2018/01/2820-1.jpg 600w" sizes="(max-width: 300px) 100vw, 300px"></a> <div class="image_links double"><a rel="nofollow" href="/?add-to-cart=2531" data-quantity="1" data-product_id="2531" class="add_to_cart_button ajax_add_to_cart product_type_simple"><i class="icon-basket"></i></a> <a class="link" href="http://improveagnc.ru/product/iphone-7/"><i class="icon-link"></i></a> </div> </div><a href="http://improveagnc.ru/product/iphone-7/"><span class="product-loading-icon added-cart"></span></a></div> </div> <div class="desc"> <h4><a href="http://improveagnc.ru/product/iphone-7/">IPhone 7</a></h4> <span class="price"><span class="woocommerce-Price-amount amount">30,000.00&nbsp;<span class="woocommerce-Price-currencySymbol">₽</span></span> </span> <div class="excerpt"> <p>Защита от брызг и воды, новая камера 12Мп и фронтальная 7Мп, ярче дисплей, больше аккумулятор, новый процессор A10 Fusion, стереодинамики.</p> </div> </div> </li>

    1 answer 1

    It is done this way!

    The height of the overlay element is not important at all .. well, actually see an example

     * { margin: 0; padding: 0; } .wrapper { width: 100%; } .block { display: inline-block; width: 200px; min-height: 300px; border: 1px solid #ccc; margin: 10px 4px; text-align: center; background: #fff; transition: all .1s linear; position: relative; z-index: ; } .block img { display: block; width: 200px; height: 240px; } .item { width: 100%; height: 450px; position: absolute; top: 0; left: 0; background: #fbfbfb; z-index: 100; opacity: 0; height: 0; transition: all .3s linear; } .block:hover .item { height: 450px; opacity: 1; border: 1px solid #ccc; } @media(max-width:900px){ .wrapper{ text-align:center; } } 
     <div class="wrapper"> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> <div class="block"> <div class="view"> <img src="http://www.sojones.com/wp-content/uploads/2009/05/april_11_enyce-clothing_company_launching_womens-shoes_and_hoisery_collections_01.jpg" alt=""> </div> <div class="price"> <p> Футболка <b>Enyce</b></p> <span>цена: 3Р-р</span> </div> <div class="item"> <h4>Футболка</h4> </div> </div> </div>

    Demo with a mini mobile version : https://codepen.io/topicstarter/pen/pazPwZ?editors=1100 ..... revision is required