Эффект размытия и фокуса на CSS
На этом уроке мы реализуем интересный эффект с фокусировкой размытого фона и размытия изображения при наведении в CSS.
При наведении на элемент (самолет), размытый фон масштабируется и приобретает фокус. Одновременно с фокусировкой фона, самолет размывается до состояния полупрозрачности. Таким образом взгляд пользователя фокусируется то на фоне, то на картинке.
до наведения:
при наведении:
HTML разметка
Создадим секцию на весь первый экран, внутри которой поместим блок с фоновым изображением и вставим картинку.
CSS стили
По умолчанию для всех элементов родителем служит тег body, относительно которого они позиционируются на странице. Мы изменим это правило и назначим родителем секцию, относительно которой будут позиционироваться остальные элементы. Кроме того, расположим все элементы внутри секции (фон и картинка) по центру.
.section <
position: relative; // устанавливаем родителя
overflow: hidden;
width: 100%; // ширина секции
height: 100vh; // высота секции на высоту окна
display: flex; // это flex-контейнер
justify-content: center; // горизонтальное выравнивание
align-items: center; // вертикальное выравнивание
>
Изначально наш фон будет размытым, для этого зададим свойство filter со значением blur с радиусом размытия в 10 пикселей.
.bg <
position: absolute;
top: 0;
left: 0;
width: 100%; // растянуть на всю ширину секции
height: 100%; // растянуть на всю высоту секции
background-image: url('../img/bg.jpg');
background-size: cover; // масштабируется без потери пропорций
filter: blur(10px); // размытие фона
transition: 2s; // плавный переход от размытия до получения фокуса
>
.airline <
width: 250px; // ширина картинки
height: auto; // высота картинки подстроится автоматически
position: relative; // для корректной работы z-index
z-index: 1; // слой с картинкой выше слоя с фоном
transition: 2s; // плавный переход эффекта размытия
>
Зададим стили, что должно происходить при наведении мыши на картинку с самолетом: изображение начнет размываться, увеличиваясь в размерах до полупрозрачного отображения.
.airline:hover <
filter: blur(10px); // радиус размытия
transform: scale(1.2); // масштабирование
opacity: 0.5; // полупрозрачность
cursor: pointer;
>
Когда мы наводим на самолет, данный селектор с тильдой выберет все соседние элементы, в нашем случае это фон и применит следующие свойства к фону. В результате получится эффект приближения фона и наведение резкости.
.bg <
filter: blur(0); // вернет фону резкость
transform: scale(1.5); // трансформирует фон в сторону увеличения
>
Усиление эффекта
Эффект можно еще больше усилить, если при наведении на самолет добавить проявляющийся текст.
.text <
position: relative;
color: transparent;
z-index: 2;
bottom: 30px;
transition: 2s;
font-size: 30px;
font-weight: 800;
font-family: Impact;
text-transform: uppercase;
>
.text <
transform: scale(1.5);
z-index: 2;
color: rgb(226, 43, 134);
>
Демонстрация эффекта размытия и фокусировки
Самостоятельно изучая HTML/CSS, наверняка вас должна заинтересовать тема по заработку сайтов на заказ. Основываясь на своем личный опыт, я записал пошаговое руководство по «Заработку на создании сайтов под заказ».
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
How to apply a CSS filter to a background image
I have a JPEG file that I’m using as a background image for a search page, and I’m using CSS to set it because I’m working within Backbone.js contexts:
I want to apply a CSS 3 blur filter only to the background, but I’m not sure how to style just that one element. If I try:
just underneath background-image in my CSS, it styles the whole page, rather than just the background. Is there a way to select just the image and apply the filter to that? Alternatively, is there a way to just turn the blur off for every other element on the page?
How TO — Blurred Background Image
Learn how to create a blurry background image with CSS.
Blur Background Image
Note: This example does not work in Edge 12, IE 11 or earlier versions.
How To Create a Blurry Background Image
Step 1) Add HTML:
Example
Step 2) Add CSS:
Example
.bg-image <
/* The image used */
background-image: url("photographer.jpg");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
>
/* Position text in the middle of the page/image */
.bg-text <
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
>
Три полезных CSS свойства для работы с изображениями
Многие начинающие разработчики, которые верстают сайт или веб-приложение, по своей неопытности игнорируют важные CSS свойства и тем самым увеличивают объем работы и сроки создания сайта. В этой статье мы поговорим о базовых свойствах CSS о которых должен знать каждый разработчик
Видеоурок к статье
Выравнивание изображения и текста
Очень часто при верстке требуется выровнять изображение и текст.
Это можно сделать помощью CSS свойства vertical-align.
Выравнивание текста по верхней части
свойство vertical-align:top
Выравнивание текста по центру
свойство vertical-align:middle
Выравнивание текста по нижней части
свойство vertical-align:bottom
Установка фиксированного фонового изображения
Иногда возникает потребность установить фоновое изображение на сайт и зафиксировать его, чтобы при прокрутке оно не перемещалось.
Для того, чтобы установить фиксированное фоновое изображение на сайт, необходимо к свойствам изображения добавить свойство background-attachment.
background-image: url(images/your-image.png);
background-attachment: fixed;
Эффект размытия с помощью CSS
Иногда требуется размыть изображение с помощью CSS.
Для того, чтобы размыть изображение с помощью CSS необходимо в свойство изображения прописать -webkit-filter: blur(5px);
А для того, чтобы этот эффект работал во всех браузерах, напишите как в примере ниже:
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
Выводы
В этой статье мы поговори ли о том, как с помощью CSS можно выравнять текст к изображению, как сделать изображение размытым и как зафиксировать фоновое изображение.
В прошлой статье, мы говорили о том, как с помощью CSS3 можно вращать изображение. В следующих статьях мы поговорим о других CSS свойствах.