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

#html #css #image #hover

Вопрос:

Я пытаюсь создать эффект наведения на изображение. Когда я зависаю, на изображении должно появиться немного темноты. Для этого я попробовал использовать свойство непрозрачности, оно работает, но не кажется таким уж хорошим или впечатляющим. Скорее, это придает легкость, а это не то, чего я хотел. Если вам интересно, какую темноту я хочу, чтобы изображение зависало, что-то вроде этого, rgba(0,0,0,0.2) . Но как мне его использовать?

Я также поиграл с псевдо-элементом, если смогу его использовать, но ничего не смог сделать. Я знаю, что это так не сработает, но я даже сейчас не могу объяснить. Помогите мне, пожалуйста.

 .box::before {
 content: '';
width:100%; 
height: 100%;
background: rgba(0,0,0,0,2);

}

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

 .box {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin-top: 10px;
   background:url(https://r1.ilikewallpaper.net/ipad-air-wallpapers/download/4427/Green-Nature-iPad-4-wallpaper-ilikewallpaper_com_200.jpg);
}

.box:hover {
  opacity:0.8;
  /*rgba(0,0,0,0.2) This is needed*/
}

 <div class="box">
</div>

Ответ №1:

Используйте псевдоэлемент hover , а затем установите background его так, как вы хотите

 .box {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin-top: 10px;
  background:url(https://r1.ilikewallpaper.net/ipad-air-wallpapers/download/4427/Green-Nature-iPad-4-wallpaper-ilikewallpaper_com_200.jpg);
  position:relative;
}

.box:hover:before
 {
   content:'';      
   width:100%;
   height:100%;
   position:absolute;
   background:rgba(0,0,0,0.2);
}

 <div class="box">
</div>

Ответ №2:

Вы можете использовать фильтр оттенков серого в CSS.

Что-то вроде этого:

 img {
  filter: grayscale(0%);
}
img:hover {
  filter: grayscale(20%);
}

Узнайте больше об этом здесь: https://www.w3schools.com/cssref/css3_pr_filter.asp

1. Это также может быть хорошим вариантом. Спасибо @AD-1.

2. Добро пожаловать! P.S. если вы нашли это полезным, не могли бы вы озвучить мой ответ? Я пытаюсь достичь репутации 500 😉

Ответ №3:

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

 .box {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin-top: 10px;
   background:url(https://r1.ilikewallpaper.net/ipad-air-wallpapers/download/4427/Green-Nature-iPad-4-wallpaper-ilikewallpaper_com_200.jpg);
}

.box:hover {
  -webkit-filter: brightness(80%);
}

 <div class="box">
</div>