Анимация карточки товара при наведении мыши | Практика HTML и CSS анимации для начинающих

Исходники к видео:

Подписывайся на альтернативные каналы:

Cегодня я покажу вам, как сделать крутую анимированную карточку товара на чистом HTML и CSS.

0:00 - Вступление
0:25 - Подготовка проекта
0:59 - HTML разметка карточки товара
2:42 - Оформление карточки
3:25 - Центрирование элемента на Flexbox
3:54 - Стилизация элементов
6:01 - Задний фон
7:40 - Анимация при наведении
9:13 - Результат и подведение итогов

#codequest #ityoutubers

Если тебе интересна данная тематика, подпишись на канал!
Для меня это также станет дополнительным стимулом продолжать свою работу.

Здесь вы найдете подробные интерактивные курсы по веб-разработке.

Надеюсь на вашу поддержку и интересные вопросы! До скорых встреч!

[CodeQuestRu]

0:00 - Вступление
0:25 - Подготовка проекта
0:59 - HTML разметка карточки товара
2:42 - Оформление карточки
3:25 - Центрирование элемента на Flexbox
3:54 - Стилизация элементов
6:01 - Задний фон
7:40 - Анимация при наведении
9:13 - Результат и подведение итогов

[yekoojn]

Спасибо, точу руки. Ещё один сниппет в копилочку )

[dennymaverick]

Спасибо, очень здорово! И полезно! Лайк❤️🙂

[abadondemon]

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

[asco]

А как сделать из неё слайдер ? жду ответ

[gugman]

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

[PassintoEurope]

Это конечно очень симпатично, но как оно будет работать на тачскрине смартфона или планшета?

[Pushinka_and_Barcelona]

Style css это надо всё переписать? Я не понимаю всё красным

[jvtkqxc]

у меня у картинки есть белый фон что делать чтобы получился как у тебя ?

[semenskromnyi]

Т.е., чтобы просто взглянуть на твою img, надо заплатить три доллара?