0

Доброго времени суток.
Есть сайт - http://improveagnc.ru/
При наведении на любой продукт, появляется описание. Но это описание смещает нижестоящие блоки. Если задать блоку с описанием позишн абсолют, то он вылезает из box-shadow и затемняется вместе с остальными блоками вокруг.
Хочу сделать как здесь: https://i-store.net/
Вот что имеется на данный момент, подскажите, пожалуйста, что можно сделать.

.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 ответ 1

0

Делается это так !

Высота overlay элемента не важна вообще .. ну собственно смотрите пример

* {
  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>

дэмо с мини мобильной версией : https://codepen.io/topicstarter/pen/pazPwZ?editors=1100 ..... требуется доработка

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.