Эффект при наведении на карточку фиксированную при скролле в зеро блоке

магазин кастомных решений для тильды

Здесь собраны самые уникальные решения для тильды, с помощью которых вы сможете расширить функционал своих сайтов

Получить доступ

Обучающие продукты

Бесплатные модификации

Магазин модификаций

Курс «Tilda Custom Base»

бесплатный

Курс «Tilda Custom Main»

базовый

Курс «Tilda Custom Pro»

для опытных

Курс «Стилизация личного кабинета»

новое

Курс «Tilda Custom Нейросети»

новое

Предзапись на курс по стилизации стандартных блоков на тильде

Вы можете забронировать за собой самую низкую стоимость обучения, которое стартует 27 октября

Забронировать место

30+ бесплатных модификаций для твоих проектов на тильде

Уникальные модификации, с помощью которых вы сделаете свои проекты ещё круче, продуманнее и функциональнее

Перейти

телеграм-канал для дизайнеров

Чтобы не пропустить выход новых уроков, бесплатных и платных модификаций и также анонсов обучения — подписывайся на мой телеграм-канал

Связаться со мной

Я на связи с 10:00 до 18:00 (мск) в будние дни

Заказать разработку сайта

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

Сайт-портфолио

Заказать сайт

Тильда

нейросети

создавайте рабочий код с помощью AI

12 900 ₽

от ~2 150 ₽ / месяц

в рассрочку от банков

26 уроков

таблица с 180 промптами

4 решения с нуля

полезное расширение

чат потока

бонусы

личный кабинет

Узнать подробнее о курсе

Старт обучения 20 мая

Стилизация личного кабинета

Научись стилизовать личные кабинеты курсов без знания кода

17 900 ₽

от ~2 980 ₽ / месяц

в рассрочку от банков

4 модуля

18 уроков

14 конструкторов кода

чат потока

бонусы

личный кабинет

Узнать подробнее о курсе

Старт обучения 20 мая

Tilda Custom Main

тот самый курс по стилизации стандартных блоков на тильде, на котором уже обучилось 300+ человек

19 900 ₽

от ~3 3000 ₽ / месяц

в рассрочку от банков

50 уроков

50+ домашних заданий

100+ тестов

чат потока

бонусы

мастер-классы

личный кабинет

Узнать подробнее о курсе

Старт обучения 20 мая

Tilda Custom PRO

Продвинутая кастомизация стандартных и zero-блоков. Всё, что я знаю о кастомизации Тильды, собрано здесь

19 900 ₽

от ~3 300 ₽ / месяц

в рассрочку от банков

43 урока

40+ домашних заданий

60+ тестов

чат потока

бонусы

мастер-классы

личный кабинет

Узнать подробнее о курсе

Старт обучения 20 мая

Главная
/
Модификации
/
Крутой эффект при наведении на карточку

Смотрите обучающее видео на YouTube канале

Крутой эффект при наведении на карточку

Смотреть

Эффект работает только на десктопе

Creativity is to discover

Curiosity about life

Creativity is to discover

The best ideas come as jokes. Make your thinking as funny as possible.

Design creates culture. Culture shapes values. Values determine the future.

The best ideas come as jokes. Make your thinking as funny as possible.

Готовый код

Здесь вы можете скопировать готовый код и также почитать подробные комментарии к нему

Смотреть код

   <!--https://dsgnmax.ru/animation-card--> <style>
/*Соотношение сторон фотографий должно быть таким же, как и у шейпа*/

.photo > .tn-atom__sbs-anim-wrapper > .tn-atom{ /*Вместо класса .photo указываете свой, который привоите шейпу*/
        transition:0.4s all; /*Плавность анимации*/
        background-size:150% !important; /*Изначальный размер фотографии*/
        filter: brightness(100%); /*Изначальная яркость фотографии*/
        -webkit-filter: brightness(100%);
    }
    .photo > .tn-atom__sbs-anim-wrapper > .tn-atom:hover{
        /*transform:translateY(-30px);*/ /*Смещение карточки при наведении,если нужно*/
        transform:scale(1.05); /*Увеличение карточки при наведении*/
        -webkit-transform:scale(1.05);
        box-shadow: 0px 32px 24px rgba(0, 0, 0, 0.12); /*Тень при наведении*/
        filter: brightness(10%); /*Яркость фотографии при наведении*/
        -webkit-filter: brightness(10%);
        background-size: 100% !important; /*Размер фотографии при наведении*/
    }
</style>