2021-09-13 00:00:00

Эффект размытия и фокуса на CSS На этом уроке мы реализуем интересный эффект с фокусировкой размытого фона и размытия изображения при наведении в CSS. При наведении на элемент (самолет), размытый фон масштабируется и приобретает фокус. Одновременно с фокусировкой фона, самолет размывается до состояния полупрозрачности. Таким образом взгляд пользователя фокусируется то на фоне, то на картинке. до наведения: Эффект размытия и фокуса на 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); // трансформирует фон в сторону увеличения } Усиление эффекта Эффект можно еще больше усилить, если при наведении на самолет добавить проявляющийся текст. Эффект размытия и фокуса на CSS. .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, наверняка вас должна заинтересовать тема по заработку сайтов на заказ. Основываясь на своем личный опыт, я записал пошаговое руководство по "Заработку на создании сайтов под заказ".