Второе решение, которое обещал вам показать – это ховеры для стандартных блоков.

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


В чём вообще логика работы этого решения:

1. Я могу стилизовать при наведении сам элемент, на который навожу. Это может быть минимальная стилизация, например маленькое уменьшение или лёгкая тень
2. Также могу стилизовать дочерние элементы при наведении на сам элемент. Получается, что наводя на карточку я могу менять свойства всех элементов, которые находятся внутри неё.
3. Ну и небольшой триггер внутри карточки. По наведению на элемент внутри карточки я меняю свойства любого другого элемента, который также есть в этой карточке.
4. Ещё в работе добавлять именно анимацию дочерним элементам при наведении. Например я навожу на карточку товара, а у меня лейбл начинает крутиться или пульсировать, или кнопка начинает как-то двигаться, и анимация проигрывается до тех пор, пока курсор мыши не будет убран с элемента.

Дополнительно в решении имеются пресеты, вы можете сами их туда добавлять и потом применять на других элементах. Также есть возможность отключать ховер-эффекты на мобилках и много еще чего другого.
Старался сделать максимально удобный инструмент от дизайнера для дизайнеров и чтобы им было удобно и приятно пользоваться.

Кстати, на выходе получается аккуратный код, без портянки ненужных классов, плюс вы сами регулируете, добавлять ID блока или uc-класс перед всеми элементами, а это очень важно при работе с тильдой)


Как вам такое решение? Делитесь в комментариях)
И давайте усложним задачу, набираем 200🔥 огоньков на этот пост,и я делюсь с вами третьим решением, которое уже также в процессе сборки.