Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики

Настройка и сопровождение рекламного кабинета во Вконтакте.

от 14000 

Настройка и сопровождение рекламного кабинета Яндекс Директ.

от 25000 

Продвижение на авито под ключ. Получите клиентов в первую неделю. Создадим до 50тыс похожих объявлений!

от 29500 

Как сделать затемнение при наведении css

Чтобы сделать затемнение при наведении на элемент в CSS можно использовать свойство opacity.

Например, чтобы делать затемнение при наведении на изображение, можно задать свойство opacity равное 1 для прозрачности изображения по умолчанию, а затем при наведении на изображение установить значение opacity равное 0.5 или другому значению по вашему выбору для затемнения:

img {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

img:hover {
  opacity: 0.5;
}

Здесь мы использовали селектор img для выбора всех изображений на странице. Значение opacity: 1 задает изображению полную непрозрачность (не прозрачное), а opacity: 0.5 устанавливает изображению неполную прозрачность (затемнение). Мы также использовали transition для плавного перехода между двумя значениями opacity.

Вы также можете использовать другие CSS-свойства, такие как background-color, вместо opacity для создания эффекта затемнения при наведении. Пример кода для создания затемнения фона элемента при наведении:

.element {
  background-color: #fff;
  transition: background-color 0.5s ease-in-out;
}

.element:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

Здесь мы использовали background-color для установки цвета фона элемента, а также rgba() для создания прозрачности. Значение background-color: rgba(0, 0, 0, 0.5) устанавливает черный цвет фона с прозрачностью 50%, создавая эффект затемнения при наведении на элемент.

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.