Приветствую. Сайт на 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!">
<img src="#" alt="2" title="Not rated yet!">
<img src="#" alt="3" title="Not rated yet!">
<img src="#" alt="4" title="Not rated yet!">
<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 руб.</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>
Поставь padding-top на размер тени для блока owl-carusel.
Если overflow:hidden
нужен в качестве clearfix'а, то следует воспользоваться другой его разновидностью.
Если overflow:hidden
используется по назначению, то можно сделать wrapper, и во внутренний элемент прописать overflow, а у внешнего сделать тень.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Вообщем есть веб-сайт - интернет магазин, в текущей реализации, при входе статика: хедр и футерВсе остальное подгружается после аяксом(урлы...
У меня есть счетчик, подсчитывающий количество и сумму конкретной продукцииВ span с классом quantity хранится количество и сумма в виде "13 x 70 руб
Как изменить статичную ссылку в iframe, загруженном с другого сайта?
Как можно сделать адаптивный баннер? Баннер используется на страницы SharePoint 2010, необходимо решение на CSS, без использования bootstrap и других...