Затемнение css при наведении: Как при наведении на картинку сделать эффект затемнения? — Хабр Q&A

Разное 

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

Вопрос задан

Изменён 3 года 4 месяца назад

Просмотрен 387 раз

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

  • css
  • css3
  • изображения
  • background
  • opacity

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

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

Результат:

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 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div>
  <img src="https://picsum.photos/536/354">
</div>

2

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

хотите 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 {
  opacity: 1;
}
<div>
  <div>
    <div>
      Я типа картинка
    </div>
    <div>
      Я типа вторая картинка с лупой и еще чем то
    </div>
  </div>
</div>

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

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

как сделать затемнение картинки при наведении на нее — Вопрос от Гордон Комсток

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация

>

Категории вопросов

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

Основное

  • Вопросы новичков (16522)
  • Платные услуги (2133)
  • Вопросы по uKit (82)

Контент-модули

  • Интернет-магазин (1433)
  • Редактор страниц (236)
  • Новости сайта (499)
  • Каталоги (808)
  • Блог (дневник) (112)
  • Объявления (295)
  • Фотоальбомы (433)
  • Видео (255)
  • Тесты (60)
  • Форум (578)

Продвижение сайта

  • Монетизация сайта (220)
  • Раскрутка сайта (2455)

Управление сайтом

  • Работа с аккаунтом (5322)
  • Поиск по сайту (426)
  • Меню сайта (1765)
  • Домен для сайта (1533)
  • Дизайн сайта (13471)
  • Безопасность сайта (1483)
  • Доп. функции (1308)

Доп. модули

  • SEO-модуль (225)
  • Опросы (63)
  • Гостевая книга (99)
  • Пользователи (433)
  • Почтовые формы (318)
  • Статистика сайта (198)
  • Соц. постинг (212)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (644)
  • PHP и API на uCoz (235)
  • SMS сервисы (10)
  • Вопросы по Narod. ru (429)
  • Софт для вебмастера (39)

…

css — Как установить более темный цвет фона при наведении *, не зная исходного цвета *?

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

спросил

Изменено 2 года, 2 месяца назад

Просмотрено 2к раз

Я пробовал все, что связано с filter и background-filter , но ничего не работает. Я искал в Интернете, но не нашел ни одной статьи, посвященной этому (что странно).

Я просто хочу, чтобы фоновый цвет был немного темнее, чем текущий цвет, без предварительного знания цвета. То есть я не хочу «жестко кодировать» определенный цвет для изменения, но хочу, чтобы он динамически определялся из исходного цвета фона 9.0014 .

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

Например (это не рабочий код):

 table tr { background-color: #FFF; }
table tr:hover { background-color: "оригинал, но на 25% темнее, что в данном конкретном случае означает сероватый оттенок"; }

Я подозреваю, что причина, по которой фильтр не работал, заключалась в том, что он делал весь объект ярче/темнее, а не только цвет фона. фоновый фильтр , похоже, не оказывает никакого влияния на мою сторону.

  • CSS
  • CSS3

4

Вы можете сделать это с прозрачным фоном, скажем, 60% альфа-черным и двумя вложенными элементами.

Установите цвет фона родительского элемента и прозрачный черный цвет фона дочернего элемента при наведении.

Зарегистрируйтесь или войдите в систему

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

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания, политикой конфиденциальности и политикой использования файлов cookie

.

Как создать эффекты наведения фона в Squarespace — InsideTheSquare.co

ПОЛЬЗОВАТЕЛЬСКАЯ ВЕРСИЯ CSS 7.1ВЕРСИЯ 7

Написано insidethesquare

Это руководство предназначено специально для последней версии Squarespace, известной как 7.1, и не будет работать для более старых версий Squarespace. Для получения дополнительной информации посетите https://insidethesquare.co/themes

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

Все коды из этого руководства приведены ниже, НО вам нужно знать две вещи:

→ Это относится к разделам страницы в версии 7. 1, как классической, так и гибкой. Это не будет работать для разделов галереи, но для любого другого типа раздела страницы, включая разделы списка/людей

→ Существует несколько способов сделать это! Код супер настраиваемый, и это моя техника.

Вот все коды из этого урока:

Этот изменит цвет фона раздела страницы при наведении:

#page .page-section:hover .section-background{background-color:#000!important}

Добавьте этот код, чтобы изменить цвет любого текста в этом разделе страницы:

#page .page-section:hover * {color:#FFF!important}

Этот код изменит непрозрачность фонового изображения раздела страницы, сделав его более прозрачным при наведении и показывая цвет страницы под ним.

#page .page-section:hover .section-background{opacity:0. 5!important}


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

#page .page-section .section-background{opacity:0.5!important}

#page .page-section:hover .section-background{opacity:1!important}

Чтобы изолировать один раздел страницы, замените #page .page-section на идентификатор раздела данных . Я использую это бесплатное расширение Chrome, чтобы получить эту информацию; не аффилированный - просто фанат! chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

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

; переход: все 1с

ПОИСК В АРХИВАХ ОБУЧЕНИЯ

Понравился этот урок?

Поделись с друзьями из Squarespace!

Версия 7.

No related posts.

Автор записи

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

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