Эффект размытия и фокуса на CSS
На этом уроке мы реализуем интересный эффект с фокусировкой размытого фона и размытия изображения при наведении в CSS.
При наведении на элемент (самолет), размытый фон масштабируется и приобретает фокус. Одновременно с фокусировкой фона, самолет размывается до состояния полупрозрачности. Таким образом взгляд пользователя фокусируется то на фоне, то на картинке.
до наведения:
при наведении:
HTML разметка
Создадим секцию на весь первый экран, внутри которой поместим блок с фоновым изображением и вставим картинку.
<section class="section">
<img src="img/airline.png" alt="airline" class="airline">
<div class="bg"></div>
</section>
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;
}
Когда мы наводим на самолет, данный селектор с тильдой выберет все соседние элементы, в нашем случае это фон и применит следующие свойства к фону. В результате получится эффект приближения фона и наведение резкости.
.airline:hover~.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;
}
.airline:hover~.text {
transform: scale(1.5);
z-index: 2;
color: rgb(226, 43, 134);
}
Самостоятельно изучая HTML/CSS, наверняка вас должна заинтересовать тема по заработку сайтов на заказ. Основываясь на своем личный опыт, я записал пошаговое руководство по "Заработку на создании сайтов под заказ".
-
Создано 15.04.2020 10:35:54
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.