Hover Effect для продукта в сетке

Разработчикам Общение разработчиков
1

Где нужно копать для того, чтобы в стандартном респонсиве создать такой эффект?

2

Какой такой и что должно происходить при наведении курсора на изображение в сетке?

3

простой grow shadow

4

Типа этого?

image

Можно так:

.ty-grid-list__item:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-radius: 6px;
    transition: .3s;
}

С отцентрованными элементами (название, цена, кнопка) и небольшой стилизацией должно выглядеть более презентабельно:

image

1 лайк
5

WOW, YOU ARE MY HERO! Выглядит потрясающе красиво. :sunny:

2HfqYM.png678×774 226 KB

6

Можно добавить скругление к картинке товара сверху (чтоб не было небольших “артефактов” на углах):

.ty-grid-list__image {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

И небольшой отступ от кнопки Quick View, чтоб не было вплотную к границе:

.ty-quick-view-button {
    margin-bottom: 5px;
}
1 лайк
7

Еще лучше. Да Вы прямо эстет. Огромное спасибо!

Между прочим, меня эти артефакты наверху даже радуют, потому что создают легкую диспропорцию в гармонии, что и является определением универсальной красоты.

8

Не за что. Я пикселедрочер, мне живется тяжелее.