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

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

Если вы хотите, чтобы у изображений товаров была тень,  в активную 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;
}


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

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 3 из 3
Остались вопросы?
Обратитесь за помощью
  • Форум

    Общайтесь с другими пользователями Эквида и командой поддержки клиентов по любым вопросам, связанным с работой вашего магазина.

  • Связь с техподдержкой

    Есть вопросы? Свяжитесь с нами, мы будем рады вам помочь.

  • Состояние сервиса

    Страница с информацией о запланированных технических работах и текущем состоянии сервиса.