@Sveta91

Как сделать эфект ховер на карточки товаров как на tiffany или sunlight?

Подскажите, при помощи какого скрипта реализован эффект открытия информации поверх соседних блоков на сайтах Tiffany и на подозрительно похожем Sunlight'e Это как я поняла модалки, которые появляются в месте товара над которым производится ховер, не подскажите с помощью какой библиотеки можно это реализовать и нет ли вариантов сделать это средствами css? Заранее спасибо за ответы и советы =)
  • Вопрос задан
  • 1561 просмотр
Решения вопроса 1
@ned4ded
Верстка, Фронтенд
На Tifanny это реализовано с помощью js. Сильно сомневаюсь, что тут нужна доп. библиотека. При наведении на товар добавляется целый блок в секцию товара. После mouseleave (хз, как назвать это по-русски, отведение курсора?) блок удаляется.

У них использован js, вероятно, для сокращения веса страницы, увеличения скорости рендеринга.

Как ни странно, на Sunlight это реализованно сильно по-другому. Там через js добавляется только класс к блоку, все остальные его элементы уже заранее собраны.

Совпадение стилей - случайность, возможно, дизайн кто-то у кого-то стырил (причем весь дизайн, у них совпадает не только эффект при наведении на карточку товара, но много чего еще).

На чистом css реализовать можно, но без анимации. Что-то вроде:

.card
    .card__info
    .card__info-more

.card__info:hover ~ .card__info-more { display: block };


Все это вы вполне могли узнать сами, используя инструменты разработчика ;)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
20 апр. 2024, в 13:56
7000 руб./за проект
20 апр. 2024, в 13:52
7000 руб./за проект
20 апр. 2024, в 13:23
1000 руб./за проект