overflow:hidden обрезает тень - как поправить?

732
15 декабря 2016, 16:29

Приветствую. Сайт на wordpress, построенный с помощью visual composer. В ряду находится карусель с элементами. При наведении на блок с элементом он вокруг обрастает красивой тенюшкой, но сверху она обрезается overflow:hidden; который прописан в стандартных стилях owl-carusel. Если overflow просто удалить из стилей, то за контейнером ряда будет отображаться еще 1 товар, что мне абсолютно не в строчку! Такой вопрос: как избавится от обрезки тени? (сайт адаптивный, если что)

/*  
 * 	Core Owl Carousel CSS File 
 *	v1.3.2 
 */ 
 
/* clearfix */ 
 
.owl-carousel .owl-wrapper:after { 
  content: "."; 
  display: block; 
  clear: both; 
  visibility: hidden; 
  line-height: 0; 
  height: 0; 
} 
/* display none until init */ 
 
.owl-carousel { 
  display: none; 
  /*position: relative;*/ 
  width: 100%; 
  -ms-touch-action: pan-y; 
} 
.owl-carousel li { 
  list-style: none; 
} 
.owl-carousel .owl-wrapper { 
  display: none; 
  position: relative; 
  -webkit-transform: translate3d(0px, 0px, 0px); 
} 
.owl-carousel .owl-wrapper-outer { 
  overflow: hidden; 
  position: relative; 
  width: 100%; 
} 
.owl-carousel .owl-wrapper-outer.autoHeight { 
  -webkit-transition: height 500ms ease-in-out; 
  -moz-transition: height 500ms ease-in-out; 
  -ms-transition: height 500ms ease-in-out; 
  -o-transition: height 500ms ease-in-out; 
  transition: height 500ms ease-in-out; 
} 
.owl-carousel .owl-item { 
  float: left; 
} 
.owl-controls .owl-page, 
.owl-controls .owl-buttons div { 
  cursor: pointer; 
} 
.owl-controls { 
  -webkit-user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
} 
/* mouse grab icon */ 
 
.grabbing { 
  cursor: url(grabbing.png) 8 8, move; 
} 
/* fix */ 
 
.owl-carousel .owl-wrapper, 
.owl-carousel .owl-item { 
  -webkit-backface-visibility: hidden; 
  -moz-backface-visibility: hidden; 
  -ms-backface-visibility: hidden; 
  -webkit-transform: translate3d(0, 0, 0); 
  -moz-transform: translate3d(0, 0, 0); 
  -ms-transform: translate3d(0, 0, 0); 
} 
 
/* shadow */ 
.product .product-frame { 
position: relative; 
z-index: 1; 
border-width: 1px; 
border-style: solid; 
border-color: #fff; 
padding: 10px; 
background-color: #fff; 
font-size: 14px; 
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.10); 
box-shadow: 0 1px 1px rgba(0,0,0,.10); 
-webkit-border-radius: 4px; 
border-radius: 4px; 
}
<div class="owl-wrapper-outer autoHeight" style="height: 731px;"> 
  <div class="owl-wrapper" style="width: 3040px; left: -380px; display: block; -webkit-transition: all 0ms ease; transition: all 0ms ease;"> 
    <div class="owl-item" style="width: 380px;"> 
      <li class="..."> 
        <div class="product-frame "> 
          <div class="thumbnail-container "> 
            <span class="onfeatured">Featured!</span>	 
            <a href="#"> 
              <div class="front"> 
                <img width="325" height="325" src="#" class="attachment-shop_catalog wp-post-image" alt="item-1"> 
              </div> 
            </a> 
            <span data-id="3198" class="quick-view">Быстрый просмотр</span> 
          </div> 
          <!--/ .thumbnail-container--> 
          <div class="content-description"> 
            <div class="product-section"> 
              <h3><a href="#">ссылка</a></h3> 
              <span class="title-description"></span> 
              <br> 
              <table class="description-table"> 
              </table> 
              <img src="" alt=""> 
              <div class="rating-box"> 
                <div class="rating readonly-rating" data-score="0" title="Not rated yet!" style="width: 100px;"> 
                  <img src="#" alt="1" title="Not rated yet!">&nbsp; 
                  <img src="#" alt="2" title="Not rated yet!">&nbsp; 
                  <img src="#" alt="3" title="Not rated yet!">&nbsp; 
                  <img src="#" alt="4" title="Not rated yet!">&nbsp; 
                  <img src="#" alt="5" title="Not rated yet!"> 
                  <input type="hidden" name="score" readonly="readonly"> 
                </div> 
                <span><a class="to-rating" href="#reviews">0 Review(s)</a></span> 
              </div> 
              <div class="clear"></div> 
            </div> 
          </div> 
          <div class="process-section"> 
            <div class="price"><span class="amount">150,000&nbsp;руб.</span> 
            </div> 
            <a href="/?add-to-cart=3198" rel="nofollow" data-product_id="3198" data-product_sku="" data-quantity="1" class="button add_to_cart_button product_type_simple">Съесть</a>	 
            <div class="product-actions"> 
              <a href="#" class="compare" data-product_id="3198"><span class="feedback">Добавить к сравнению</span>Добавить к сравнению</a>	 
            </div> 
            <!--/ .product-actions--> 
          </div> 
          <div class="clear"></div> 
        </div> 
        <!--/ .product-frame--> 
      </li> 
    </div> 
    ... 
  </div> 
</div>

Answer 1

Поставь padding-top на размер тени для блока owl-carusel.

Answer 2

Если overflow:hidden нужен в качестве clearfix'а, то следует воспользоваться другой его разновидностью.

Если overflow:hidden используется по назначению, то можно сделать wrapper, и во внутренний элемент прописать overflow, а у внешнего сделать тень.

READ ALSO
SEO + ajax веб-сайт какие есть подходы?

SEO + ajax веб-сайт какие есть подходы?

Вообщем есть веб-сайт - интернет магазин, в текущей реализации, при входе статика: хедр и футерВсе остальное подгружается после аяксом(урлы...

278
Динамическое изменение полей счетчика

Динамическое изменение полей счетчика

У меня есть счетчик, подсчитывающий количество и сумму конкретной продукцииВ span с классом quantity хранится количество и сумма в виде "13 x 70 руб

333
Изменение ссылки внутри iframe, загруженном с другого сайта

Изменение ссылки внутри iframe, загруженном с другого сайта

Как изменить статичную ссылку в iframe, загруженном с другого сайта?

367
Создание адаптивного баннера [закрыто]

Создание адаптивного баннера [закрыто]

Как можно сделать адаптивный баннер? Баннер используется на страницы SharePoint 2010, необходимо решение на CSS, без использования bootstrap и других...

315