Как добавить тень на изображения товаров

Дата последнего изменения:

Если вы хотите, чтобы у изображений товаров была тень,  в активную CSS-тему в панели управления Эквида добавьте CSS-код:

.ecwid-productBrowser-productsGrid-productTopFragment img {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

 

Товар будет выглядеть так


Чтобы затемнение у товара появлялась при наведении на него курсором, используйте CSS-код:  

.ecwid-productBrowser-productsGrid-v2 td.ecwid-productBrowser-productsGrid-productInside.ecwid-productBrowser-productsGrid-hover {
background-color: rgba(0, 0, 0, 0.2);
-webkit-transition: background-color 1s ease;
transition: background-color 1s ease;
}

 

С этим CSS-кодом при наведении курсором на карточку товара, у нее будет появляться фильтр с затемнением

Если вы хотите, чтобы затемнение появлялось только у изображений товаров, вам понадобится этот CSS-код:  

.ecwid .ecwid-productBrowser-productsGrid-productTopFragment:after {
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #000;
z-index: 10;
display: none;
opacity:0.3;
}

.ecwid .ecwid-productBrowser-productsGrid-productTopFragment:hover:after {
display: block;
}

.ecwid-productBrowser-productsGrid-v2 td.ecwid-productBrowser-productsGrid-productInside.ecwid-productBrowser-productsGrid-hover {
border:none;
}


Тогда товар будет выглядеть так

К началу
Была ли эта статья полезной? Пользователи, считающие этот материал полезным: 5 из 5