Затемнение при наведении css opacity

CSS затемнение картинки или фона

Затемнение в работе сайтов применяется часто. Типичные варианты — при наведении курсора мыши или после показа какого-либо элемента, чтобы подчеркнуть необходимость действий со стороны пользователя.

Содержимое сайта затемнить просто. Этим же способом можно воспользоваться, если потребуется сделать фоновое изображение темнее. А в качестве альтернативы приведу ещё пару вариантов, которые приходилось использовать.

Затемнение всего сайта

Используем очень простой способ. Создаём спец-элемент, после чего применяем к нему стили.

style type="text/css">
#mask background-color:rgba(0,0,0,.3); 
height:100%; 
position:fixed; 
width:100%; 
top:0; 
left:0;
>
style>

div id="mask">div>

Код безусловно приводит к выводу полупрозрачного прямоугольника на активное окно. Обычно этого не требуется, поэтому задаётся дополнительное свойство display:none; , чтобы изначально элемент был скрыт. В ходе каких-либо действий пользователя элемент показается и/или скрывается. Манипуляции производятся с помощью JavaScript или библиотеки jQuery, как в примере ниже. Для этого на элемент, вызывающий «маску», вешаем событие:

полный код (по аналогии легко сделаете для показа):

При этом, нужно помнить про css свойство z-index , когда выводите блок со свойством position , которое установлено в absolute или fixed . Большее значение располагает элемент выше, и наоборот.

Затемнение элемента при наведении

В простейшем случае, затемнение можно рассматривать как способ снятия полупрозрачности. Попробуем это сделать:

style type="text/css">
img  opacity:.25; >
img:hover  opacity:1; >
style>

Изначально блёклая картинка при наведении курсора приобретает резкость.

Если фон тёмный, а изображение светлое, меняем «последовательность»: сначала элемент показываем, как есть, а при наведении курсора добавляем прозрачность.

Честное затемнение элемента

Предыдущие способы не всегда удобны — первый требует наличия дополнительного элемента и его абсолютного позиционирования по границам предка, второй действует на всё содержимое контейнера, что иногда недопустимо.

Например, есть блок с фоновым изображением. В нём — блок с текстом.

Нужно затенить фон, при этом не трогать текст. Как узнали ранее, свойство opacity не подходит. Внесение изменений в код тоже не всегда допустимо. Чтобы не было сомнения, добавляем прозрачности:

Плашка с текстом поблекла. Явно не то, что ожидаем.

Первый способ решить проблему — с помощью дополнительного элемента. Главное, не забыть про z-index , чтобы плашка с текстом всегда оставалась на переднем плане.

Самый лёгкий вариант (исключая затемнение в редакторе и заливки изменённой картинки на сервер) — добавить свойство box-shadow с включенным значением inset, выводящем тень «внутрь» элемента.

В CSS это выглядит так (добавить для блока-родителя плашки):

 box-shadow:0 0 0 128px rgba(0, 0, 0, 0.33) inset; 

Где 128px — половина высоты элемента. Если высота блока больше, чем ширина, то задавайте половину высоты. Чтобы не путаться, просто запомните: нужна половина от большего измерения.

Кстати, цвета тени смешиваются с фоном, что даёт забавный эффект:

 box-shadow:0 0 0 128px rgba(0, 0, 153, 0.33) inset; 

Источник

Затенение элементов при наведении курсора с CSS

От автора: небольшая хитрость написания стиля для наведения курсора CSS дает возможность выделять состояния, а также выбрать элементы одного уровня для элемента, на который наведен курсор. Эффект представляет собой смесь двух эффектов.

Масштабирование элемента, на который наведен курсор

Затенение его одноуровневых элементов

Изучите Веб-вёрстку с нуля

Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!

Состояния наведения традиционно оказывают влияние на элемент, на который наведен курсор (это имеет смысл, не правда ли?). Но мы также можем прослушивать событие hover для родительского элемента.

В этом суть этого трюка, мы затеняем все дочерние элементы, когда курсор наведен на родительский элемент, и присоединяем другой обработчик к одному дочернему элементу, обратно выделяя его:

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

pointer-events: none; указывает браузеру игнорировать события мыши для элемента и всех дочерних элементов. Но если мы укажем дочернему элементу снова прослушивать события мыши с помощью pointer-events: auto;, мы получим аккуратный эффект, при котором события наведения запускаются только для дочерних элементах , но при этом запускают псевдо-селектор :hover для родительского элемента:

Источник

Затемнение картинки с помощью другой картинки

Есть картинка, и другая как просто темная, я хочу чтобы при наведении чтобы одна оставалась такой же(основная), а вторая ложилась поверх ее и давала прозрачность, в итоге чтобы получилось как-бы затемнение

2 ответа 2

вторая ложилась поверх ее и давала прозрачность, в итоге чтобы получилось как-бы затемнение

Это можно реализовать через псевдоэлемент, которому задаётся черный фон и полупрозрачность.

div < position: relative; width: 500px; height: 350px; >div::before < content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; transition: 0.2s; >div:hover::before < opacity: 0.4; >img

Есть картинка, и другая как просто темная, я хочу чтобы при наведении чтобы одна оставалась такой же(основная), а вторая ложилась поверх ее и давала прозрачность, в итоге чтобы получилось как-бы затемнение

хотите 2 картинки — пожалуйста

.i_am_image < /* Это не нужно, это эмуляция вашей картинки */ border: 1px solid grey; width: 100px; height: 100px; position: absolute; top: 0; left: 0; >.image_wrapper < position: relative; padding: 50px; /* Указываем размер блока картинки*/ >.i_am_hidden < opacity: 0; transition: opacity .5s; >.image_wrapper:hover .i_am_hidden

 
 
 
Я типа картинка
 
Я типа вторая картинка с лупой и еще чем то
 
 

Блоки div.i_am_image заменяете на свои изображения или блоки с изображениями и все будет работать. И вы в них моете разместить еще что-либо

Источник

CSS — затемненные картинки при наведении осветляются

Пять строк CSS кода без использования JavaScript и прочих языков. Затемненная картинка при наведении курсора становится светлой.

Полезное решение, когда необходимо спрятать счетчики веб-аналитики или сделать их менее заметными.

HTML разметка

CSS. По умолчанию затемнены

/*Светление картинок при наведении*/ .box-image a img, .box-image img < opacity:0.3; >.box-image a img:hover, .box-image img:hover

CSS. По умолчанию не затемнены

/*Затемнение картинок при наведении*/ .box-image a img, .box-image img < opacity:1.0; >.box-image a img:hover, .box-image img:hover

Как вы уже могли догадаться, за тень отвечает стиль opacity, который накладывает на объект не тень, а прозрачность. Значение параметров колеблется от 0 — полная прозрачность до 1 — 100% непрозрачности.

Похожие записи

Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью.

Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость.

Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное.

Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн.

В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта.

Источник