Все для веб-дизайнера
Красивый эффект при наведении на картинку
Ховер эффекты позволяют отобразить дополнительную информацию на изображениях когда пользователь наводит курсор мыши. Это удобно и привлекательно, также помогает визуально разгрузить сайт. Сегодня мы хотим показать как создать красивый hover-эффект для изображений при наведении курсора мыши с помощи CSS3. При наведении курсора мыши на изображение будет происходить анимация и плавное появление рамки на изображениях с текстовыми полями, благодаря плавности эффект выглядит очень интересно и в то же время просто.
Если вы хотите использовать готовые шаблоны с адаптивностью и поддержкой русского языка, обратите внимание на предложение от наших партнеров, там вы найдете много интересного.
Шаг 1. HTML
После того как вы подключили стили к документу, нам необходимо создать разметку, у нас будет контейнер, который мы использовали для демонстрации, также мы добавили блоки с установленным классом:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="box"> <div class="image"> <img src="img/6.jpg" alt=""> </div> <!-- изображение --> <div class="content"> <h2>Hover-эффект</h2> <p>Описание для изображений при наведении курсора мыши.</p> </div> </div> |
Для демонстрации мы использовали шесть изображений, у нас будет один класс image, и класс для отображения контента content, двигаемся далее.
Шаг 2. CSS
Теперь займемся стилями, для начала устанавливаем параметры для контейнера, чтобы изображения были выстроены в ряд и имели правильно соотношение.
|
1 2 3 4 5 6 7 8 |
.container { width: 80%; margin: 40px auto; display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); font-family: "Indie Flower", cursive; } |
Для самого изображения устанавливаем следующий простой класс:
|
1 2 3 4 5 |
.box img { width: 100%; height: 100%; border-radius: 10px; } |
Затем самый важный элемент, устанавливаем параметры для наших ховер эффектов, а также их правильном отображении при наведении курсора мыши при наведении:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
.box { position: relative; } .box::after, .box::before { content: ""; position: absolute; opacity: 1; transition: all 0.4s ease-out; top: 1rem; bottom: 1rem; left: 1rem; right: 1rem; } .box::before { border-top: 2px solid white; border-bottom: 2px solid white; transform: scale(0, 1); } .box::after { border-left: 2px solid white; border-right: 2px solid white; transform: scale(1, 0); } .box:hover::before { background: rgba(0, 0, 0, 1); transform: scale(1.05, 1); } .box:hover::after { transform: scale(1, 1.05); } .box .content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 15px; color: white; opacity: 0; } .box:hover .content { opacity: 1; } .box .content h2, .box .content p { padding: 10px; font-size: 1.3rem; } .box:hover img { opacity: 0.4; } |
Такой достаточно простой прием поможет вам реализовать красивые ховер эффекты для ваших элементов. Материал взят из зарубежного источника и представлен исключительно в ознакомительных целях.
Вот и все. Готово!
Интересно:
| Опубликовал admin 05.09.2018 в 09:30, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...