CSS Анимация картинки при наведении / работаем с :before и :after
Исходный код -
В данном видео поделюсь как можно красиво #анимировать #изображение при помощи #transform и #transition, а также задействуем #псевдоэлементы #:before и #:after. В се это реализуется на чистом #CSS #HTML.
Картинку расположим по центру экрана, при наведении увеличим ее с небольшим поворотом и эффектом размытия, а при помощи псевдоэлементов #before, #after, задаем затемнения с анимацией появления текста. Заголовок появляется с заднего фона, а параграф с переднего. Зададим кнопке блик, и в конечном итоге получится красивая анимация.
Все это реализуем на чистом #CSS3, и в уроке задействуем:
• Псевдоэлементы :before и :after
• Расположим элементы при помощи #position
• А для анимации воспользуемся transform и transition
Обсуждение видео:
Подписка на канал:
Видео сборник: ~S126H
*Видео метки*:
[01:51] - html разметка
[05:25] - Этапы описания стилей #CSS3