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

Question

[Sveta91]

Подскажите, при помощи какого скрипта реализован эффект открытия информации поверх соседних блоков на сайтах Tiffany и на подозрительно похожем Sunlight'e Это как я поняла модалки, которые появляются в месте товара над которым производится ховер, не подскажите с помощью какой библиотеки можно это реализовать и нет ли вариантов сделать это средствами css? Заранее спасибо за ответы и советы =)

Answer 1

[ned4ded]

На Tifanny это реализовано с помощью js. Сильно сомневаюсь, что тут нужна доп. библиотека. При наведении на товар добавляется целый блок в секцию товара. После mouseleave (хз, как назвать это по-русски, отведение курсора?) блок удаляется.

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

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

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

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

.card
    .card__info
    .card__info-more

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

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

Comments

[Sveta91]

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

[ned4ded]

Sveta91

Да, делается это с помощью добавления класса no-right-margin для сайта Sunlight. popUpLeft - для Тифанни.
В первом случае это формируется с помощью js в зависимости от ширины страницы, во втором, похоже, расставляется на сервере при формировании страницы.

Я заодно сделал пример на css, если вам интересно: https://jsfiddle.net/ned4ded/xcqt1860/2/.

Через css сделать можно, чтобы крайние элементы отображались влево, но только при фикс. ширине блока с карточками. В остальных случаях нужна доп. логика.

[Sveta91]

ned4ded, спасибо, познавательно ) ширина блоков адаптивная , да еще и меняется их положение масонри скриптом, наверное проще сделать инфо блок прямо на самой карточке, эти боковые попапы для меня пока сложны. Спасибо за помощь