Эффекты наведения с надписью на CSS / Image Hover Effects CSS3
В данном видео уроке при помощи #CSS реализуем простой #эффект при #наведении на #картинку.
Скачать шаблон -
Исходный код и демка -
Для реализации такого эффекта мы задействуем в css #transform со свойствами #translate, #rotate, #scale. Для плавности появления используем #transition, и обводку сделаем на #псевдоэлементах #before и #after.
Реквизиты для поддержки канала
WMR - R165181087249
WMZ - Z138569415925
Яндекс - 410011610186118
Сбербанк - 4276-3000-2291-1211
Обсуждение видео:
Текстовое описание урока -
Подписка на канал: ~dwstv
Видео сборник: ~S126H
*Видео метки*:
[00:51] - Описываем каркас блоков
[01:34] - Задаем стили блоку с картинкой
[01:53] - Позиционируем картинку по середине
[02:16] - Трансформируем при наведении
[02:56] - Оформляем текст
[04:34] - Добавляем псевдоэлементы
[05:45] - Анимируем их
[06:22] - Скрываем основной текст
*Другие видео на канале DWSTV*:
1 view
14
3
1 month ago 00:11:02 1
Калибр игра — Снайпер Аваланш | CST
1 month ago 00:36:19 1
«УРАГАН МИЛТОН НА США ОБРУШИЛИ ЗЛЫЕ РУССКИЕ»: КЛИМАТИЧЕСКИЕ ТЕХНОЛОГИИ НА ВООРУЖЕНИИ ВОЕННЫХ
1 month ago 00:51:41 1
Мигрантам стоп! Госдума ужесточает законы – будет ли эффект?
2 months ago 00:42:18 1
На космодроме взорвался “Сармат“. Взорваны три арсенала и две авиабазы.
2 months ago 01:29:26 1
Гайд по настройкам BDO \Интерфейс,разлок,производительность
3 months ago 00:00:40 1
Россия украина война сегодня 2024. Ланцет в действии. Прилёт Искандера. Серия №138 #исканэрможет
3 months ago 01:07:40 2
Залп Ракет и Пожиратель звезд / Хранитель и улучшения Щита / Nova Drift - прохождение на русском
3 months ago 01:03:34 1
Пилотная серия ! # 01 Возвращение в Titan Quest Anniversary Edition !
3 months ago 00:35:30 1
#1 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma практика | Анализ макета
3 months ago 00:00:32 1
Россия украина война сегодня 2024. Ланцет в действии. Прилёт авиабомбы. Серия №160 #схрон
4 months ago 00:00:59 1
Windows Сенсор с демонстрацией ролика
4 months ago 00:50:16 17
Экологическая экскурсия по парку “Дубки“
5 months ago 00:13:26 1
Классный эффект наведения с HAS NOT псевдоклассами
5 months ago 00:42:06 1
КАК УСПЕШНО ПРОДАВАТЬ НА АВИТО/ ИТОГИ ЗА МАЙ
6 months ago 00:13:08 1
облегчение менструальных болей за 10 минут
6 months ago 00:00:17 1
Работа по модулю 2: Современная анимация в After Effect: Создание сцены с компьютером. Pre-Compose
6 months ago 00:06:36 1
🪄💔ЧИСТКА ЛЮБИМОГО ЧЕЛОВЕКА ОТ ЛЮБОВНОГО КОЛДОВСТВА (снять приворот, крадник, заговор)
6 months ago 00:00:59 1
CRAZON Танковый Бой Spray Drifting Battle Tank на
6 months ago 00:18:20 2
раскрепощение таза. снятие боли с поясницы. повышение подвижности ТБС
6 months ago 00:11:41 1
Анализируем новый макет в #Figma глазами разработчика
7 months ago 02:28:03 1
Семинар: С.Кернбах, Тайны целительства Джуны: репликация экспериментов Э.Годика из 80х гг. в АН СССР
7 months ago 01:10:09 1
Мастер-класс «Анимация в Zero Block»
7 months ago 00:46:46 1
Итоги Поставы ТВ #Поставы
7 months ago 00:13:32 1
Мощные Подсознательные Внушения на Похудение с Тета волнами (4 Гц)