what can I use except opacity while hovering an image?

Question

I am trying to create a hover effect on image. As I hover, little darkness should appear on image. For that I have tried using opacity property, it works but doesn't feel that much good or impressive. Rather it gives lightness which is not what I wanted. If you are wondering what kind of darkness I want while image being hovered, something like this, rgba(0,0,0,0.2) . But how do I use it?

I also played around pseudo element if I can use it, but couldn't do anything. I know what this will not work like this, but I even cannot explain now. Help me please.

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

}

Following is the code with opacity, but I am trying to get little darkness as I said.

.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*/
}

user_9140740 · Answer

Use pseudo element on hover then set background as you want

.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);
}

user_15035763 · Answer

You can use filter grayscale in CSS.

Something like this:

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

Know more about this here: https://www.w3schools.com/cssref/css3_pr_filter.asp

user_15853505 · Answer

You could use this method to achieve what you're looking for. You could also add a transition effect in order to make it less sudden.

.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%);
}

what can I use except opacity while hovering an image?

3 Answers