Размытие при наведении css

Фильтры CSS и ховер эффекты

В прошлой статье я показала несколько кодов с ховер эффектами на css для картинок. Сегодня немного расскажу о фильтрах. Фильтры css — это те же фильтры, что и в графических редакторах. Фотографии и рисунки с фильтрами можно добавить в статью в редакторе блога, в режиме хтмл или в гаджеты. Так же можно применить эффекты к оформлению внешнего вида блога. Фильтры можно применять как с ховер эффектом, так и без него. Применение фильтров сss притормаживает загрузку сайта.

Фильтры

blur — размытие по Гауссу. Чем больше значение радиуса, тем больше размытие.
brightness — яркость изображения. Чем больше значение, тем ярче изображение.
contrast — контрастность изображения. Значение задается в % или в десятичных дробях.
drop-shadow — тень.
grayscale — черно-белое изображение. Чем больше значение, тем сильнее эффект.
hue-rotate — меняет цвета изображения в зависимости от заданного угла поворота в цветовом круге.
invert — негатив изображения. Значение задается в %. 0% не применяет фильтр, 100% полностью преобразует цвета.
opacity — добавляет прозрачность элементу. Значение задается только в %, 0% делает элемент полностью прозрачным, а 100% не оказывает никакого эффекта.
saturate — насыщенность цвета. Значение 0% убирает цветность, а 100% не оказывает никакого эффекта. Значения от 0% до 100% уменьшают насыщенность цвета, выше 100% — увеличивают насыщенность цвета. Значение может задаваться как в %, так и целым числом, 1 эквивалентно 100%.
sepia — эффект, имитирующий старину и «ретро». Значение 0% не изменяет внешний вид элемента, а 100% полностью воспроизводит эффект

Эффекты для картинок

описание картинки » src=»https://inshabashka.blogspot.com/2019/08/%D0%B2%D0%B0%D1%88%D0%B0%20%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B0″/>

описание картинки » src color: blue;»>ваша картинка »/>

описание картинки » height color: purple;»>281 » src color: blue;»>ваша картинка » width color: purple;»>400 »/>

описание картинки » height color: lime;»>283 » src color: blue;»>ваша картинка » width color: lime;»>400 »/>

адрес картинки » alt color: red;»>описание » >

описание картинки » height color: red;»>270 » src color: blue;»>ваша картинка » width color: red;»>400 »/>

описание » height color: orange;»>270 » src=»https://inshabashka.blogspot.com/2019/08/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8″ width color: orange;»>400 »/>

Оранжевым в коде выделила размер.

описание картинки » height color: orange;»>283 » src=»https://inshabashka.blogspot.com/2019/08/%D0%B2%D0%B0%D1%88%D0%B0%20%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B0″ width color: orange;»>400 »/>

описание картинки » height color: red;»>282 » src color: blue;»>картинка » width color: red;»>400 »/>

Ширину и высоту картинки в коде выделила красным.

Насыщенность цвета на картинке

описание картинки » src color: red;»>ваша картинка »/>

Хотелось бы сказать, что эффекты и фильтры можно использовать вместе и по раздельности. На сайте https://codepen.io/SitePoint/pen/KrXybm нашла замечательную картинку, оформленную фильтрами. На картинке используется изменение яркости и контрастности, так же добавлен эффект сепия. Очень красиво смотрится! И сложно поверить что сделана картинка из фильтров, анимации на css.

Генераторы фильтров

1. https://www.cssfilters.co/
2. https://cssgenerator.org/filter-css-generator.html
3. https://www.cssfiltergenerator.com/
4. https://atlogex.com/css-online-filter-image-generate/
5. https://cssportal.com/css-image-filter-generator/
6. http://doodlenerd.com/css-effect/css-filter-generator
7. https://webcode.tools/css-generator/blur (много генераторов на одном сайте)
8. https://www.bestagencies.com/tools/filter-effects-css-generator/
9. https://ilyashubin.github.io/FilterBlend/
10. http://blog.mojtabaseyedi.com/css-filters/
11. http://ds-overdesign.com/filter/

Источник

Эффект размытия и фокуса на 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;
>

Когда мы наводим на самолет, данный селектор с тильдой выберет все соседние элементы, в нашем случае это фон и применит следующие свойства к фону. В результате получится эффект приближения фона и наведение резкости.

.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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

10 простых эффектов при наведении без плагинов.

В этой статье я покажу вам 10 простых эффектов при наведении, для реализации которых не нужно устанавливать какие-то дополнительные плагины, модули, подключать библиотеки. Данные эффекты можно реализовать абсолютно на любом сайте, не зависимо от того, на какой CMS он у вас работает, и для этого практически не нужно вникать в код.

Навигация по статье:

• 1. CSS-эффект появления тени при наведении
• 2. CSS-эффект увеличения при наведении
• 3. CSS-эффект плавного смещения при наведении
• 4. CSS – эффект поворота при наведении
• 5. Эффект скругления углов при наведении
• 6. Изменение цвета рамки при наведении
• 7. Изменение прозрачности при наведении
• 8. Эффект размытия при наведении
• 9. Эффект окрашивания в чёрно-белый цвет при наведении
• 10. Изменение контраста при наведении
• Что делать если не получается задать класс для элемента?
• Видеоинструкция

1. CSS-эффект появления тени при наведении

Начнем с самого простого эффекта – это эффект появления тени при наведении.

Предположим, у вас на сайте есть какая-то кнопка, блок, изображение или любой другой элемент, и вы хотите добавить к нему такой эффект. Для этого нам нужно будет сделать следующее:

1. 1. Прежде всего, мы открываем страницу или запись или виджет, или файл темы, где у вас расположен этот элемент.
2. 2. Далее нам нужно будет присвоить ему класс с названием hover-effect1. В моём примере он присвоен для кнопки и для изображения.

Кстати, в WordPress, для того, что бы присвоить CSS-класс изображению не нужно переходить на вкладку «Текст», а можно просто кликнуть по изображению на вкладке «Визуально», далее кликнуть по значку карандашика.

Затем разворачиваем дополнительные настройки, и здесь мы можем дописать дополнительный CSS-класс. После чего нажимаем на кнопку «Обновить».

Как пользоваться программой NotePad++ я рассказывала в этой статье: Редактирование файлов сайта в Notepad++

Либо же можно перейти в раздел «Внешний вид» => «Редактор». Здесь у нас обычно файл стилей открыт сразу же по умолчанию. Но на всякий случай убедитесь, что у вас в заголовке над рабочей областью написано «Таблица стилей (style.css)».

После чего нажать на кнопку «Обновить файл» внизу страницы

Для того, чтобы у нас определённые CSS-свойства работали при наведении, нам необходимо использовать псевдокласс :hover.
CSS-стили, которые написаны для этого селектора будет работать только в том случае, когда на элемент наведен указатель мышки.

box-shadow – данное CSS свойство отвечает за добавление тени. Более подробно об особенностях этого свойства и значении его параметров я писала в этой статье.

Далее для того, что бы эффект был более плавным, мы используем CSS-свойство transition. И здесь у нас указывается задержка в секундах, то есть, насколько плавно будет происходить смена CSS-эффектов.

Так же, для того, что бы эта тень у нас не только появлялась, но и исчезала плавно, нам необходимо свойство transition для самого класса hover-effect1

Так же для этой тени вы можете изменять смещение, уровень размытия, цвет и т.д. Более подробно об этом у меня было отдельное видео и отдельная статья, с которой вы можете ознакомиться по этой ссылке: Как сделать тень картинки в CSS?

2. CSS-эффект увеличения при наведении

Этот эффект при наведении создаётся аналогично предыдущему. Нам просто нужно присвоить нужному элементу на сайте класс «hover-effect2» и добавить в файл стилей style.css следующий код:

Источник