Darken background image on hover

Question

How would I darken a background image on hover without making a new darker image?

CSS:

.image {
  background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
  width: 58px;
  height: 58px;
}

JSFiddle link: http://jsfiddle.net/qrmqM/1/

check this might help : http://stackoverflow.com/questions/11396753/css-box-shadow-on-divs-over-image-video-background-impossible — sakhunzai, Jul 05 '13 at 05:29

score 90 · Answer 1 · edited Dec 25 '22 at 00:06

90

Similar, but again a little bit different.

Make the image 100% opacity so it is clear. And then on img hover reduce it to the opacity you want. In this example, I have also added easing for a nice transition.

img {
    -webkit-filter: brightness(100%);
}

img:hover {
    -webkit-filter: brightness(70%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

Thank you Robert Byers for your jsfiddle

edited Dec 25 '22 at 00:06

starball

20,030
7
43
238

answered Apr 14 '15 at 08:07

Sabba Keynejad

7,895
2
26
22

5

This is the only answer that works for any shape image. Some of the other answers have tricks that will work if your image is rectangular or circular. But this works perfectly for any shape. This answer just lacks a fiddle. Here: https://jsfiddle.net/cmL1tsjh/ – Robert Byers Nov 08 '15 at 00:07
Works like a charm! Only thing I'd suggest changing is that move all the transitions to the `img`, as the easing cuts when you move your cursor off from the image. – Pepelius Dec 19 '17 at 07:24
Note that this won't work on IE11 if you have the misfortune of having to support that. – Justin Smith Jan 25 '19 at 14:48

score 52 · Accepted Answer · answered Jul 05 '13 at 05:31

52

How about this, using an overlay?

.image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
    border-radius:30px;
}

Demo

answered Jul 05 '13 at 05:31

PSL

123,204
21
253
243

Do you have an idea for images that are not a regular shape?. I have some pentagon icons that i want to animate on click, so you can have that "pressing a button feel". i wonder if i should make another img for each of the icons, or maybe i could make it do with one transparent. – Eternal Mar 19 '19 at 18:59

score 27 · Answer 3 · answered Dec 22 '19 at 18:52

27

I was able to achieve this more easily than the above answers and in a single line of code by using the new Filter CSS option.

It's compatibility in modern browsers is pretty good - 95% at time of writing, though less than the other answers.

img:hover{
  filter: brightness(50%);
}

<img src='https://via.placeholder.com/300'>

answered Dec 22 '19 at 18:52

Rory

2,175
1
27
37

2

filter option is amazing – Nuno Sarmento Nov 25 '20 at 17:36
1

I like this one. It seems to work better than using opacity. – Harlin Jun 20 '22 at 20:54

Mr. Alien · Answer 4 · 2014-02-02T11:45:19.297

If you want to darken the image, use an overlay element with rgba and opacity properties which will darken your image...

Demo

<div><span></span></div>

div {
    background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
    height: 400px;
    width: 400px;
}

div span {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: rgba(0,0,0,.5);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

div:hover span {
    opacity: 1;
}

Note: Am also using CSS3 transitions for smooth dark effect

If anyone one to save an extra element in the DOM than you can use :before or :after pseudo as well..

Demo 2

div {
    background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
    height: 400px;
    width: 400px;
}

div:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: rgba(0,0,0,.5);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

div:hover:after {
    opacity: 1;
}

Using some content over the darkened overlay of the image

Here am using CSS Positioning techniques with z-index to overlay content over the darkened div element. Demo 3

div {
    background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
    height: 400px;
    width: 400px;
    position: relative;
}

div:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: rgba(0,0,0,.5);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
    top: 0;
    left: 0;
    position: absolute;
}

div:hover:after {
    opacity: 1;
}

div p {
    color: #fff;
    z-index: 1;
    position: relative;
}

score 7 · Answer 5 · answered Jul 05 '13 at 05:30

7

You can use opacity:

.image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
    opacity:0.5;
}

.image:hover{
    opacity:1;
}

JSFiddle

answered Jul 05 '13 at 05:30

Vucko

20,555
10
56
107

2

What if I want to keep the original opacity and make it darker when hovered over? – John Smith Jul 05 '13 at 05:30
1

Then you can use another image, which is darker , or put a parent container and then darken that container ( not the image ) . – Vucko Jul 05 '13 at 07:47

score 6 · Answer 6 · answered May 01 '19 at 11:52

6

you can use this:

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

as seen on: https://stackoverflow.com/a/24084708/8953378

answered May 01 '19 at 11:52

Alon Gouldman

3,025
26
29

This is nice when you just want to darken the color but don't know the color yet and can't change opacity for other reasons – prototype Sep 30 '19 at 01:37
This is a very nice solution that has great browser support and is imo better than using transform or an overlay. Works on all browsers AND automatically has the correct border-radius and is **color agnostic** which is excellent!! – mesqueeb Oct 06 '19 at 04:34

score 5 · Answer 7 · answered Dec 31 '20 at 05:30

Here is a "shade" class that you can add directly to any <img> tag like so

<img src="imgs/myimg.png" class="shade">

img.shade:hover {
    -webkit-filter: brightness(85%);
    -webkit-transition: all 10ms ease;
    -moz-transition: all 10ms ease;
    -o-transition: all 10ms ease;
    -ms-transition: all 10ms ease;
    transition: all 10ms ease;
}

score 2 · Answer 8 · answered Jul 05 '13 at 05:29

2

Add css:

.image{
    opacity:.5;
}

.image:hover{
    // CSS properties
    opacity:1;
}

answered Jul 05 '13 at 05:29

Mohit Bhansali

1,725
4
20
43

How about without making a new image? – John Smith Jul 05 '13 at 05:30

score 2 · Answer 9 · answered Jul 05 '13 at 05:31

try this

http://jsfiddle.net/qrmqM/6/

CSS

.image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
      opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
.image:hover{
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;

    border-radius:100px;
  opacity:1;
            filter:alpha(opacity=100);

}

HTML

<div class="image"></div>

score 2 · Answer 10 · answered Jul 05 '13 at 05:37

2

Try following code:

.image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
    opacity:0.2;
}

.image:hover{
    opacity:1;
}

answered Jul 05 '13 at 05:37

enam

1,179
1
10
24

Praveen · Answer 11 · 2013-07-05T05:34:24.337

1

.image:hover {
   background: #000;
    width: 58px;
    height: 58px;
    border-radius:60px;

}

You will get darken

edited Jul 05 '13 at 05:34

answered Jul 05 '13 at 05:29

Praveen

55,303
33
133
164

How about without making a new image? – John Smith Jul 05 '13 at 05:29

machinat · Answer 12 · 2014-01-04T11:47:47.603

1

The simplest way to do it without adding an extra overlay element, or using two images, is to use the :before or :after selector.

.image {
    position: relative;
}
.image:hover:after {
    content: ""; 
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    top: 0;
    left:0;
}

This will not work in older browsers of course; just say it degrades gracefully!

edited Jan 04 '14 at 11:47

answered Jan 04 '14 at 05:43

machinat

41
4

score 0 · Answer 13 · answered Jul 05 '13 at 05:48

If you have to use the current image and get a darker image then you need to create a new one. Else you can simply reduce the opacity of the .image class and the in the .image:hover you can put a higher value for opacity. But then the image without hover would look pale.

The best way would be to create two images and add the following :

.image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
    opacity:0.9;   
}
.image:hover{
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook_hover.png');
}
}

score 0 · Answer 14 · answered Mar 02 '17 at 23:15

I would add a div around the image and make the image change in opacity on hover and add an inset box shadow to the div on hover.

img:hover{
    opacity:.5;
}
.image:hover{
    box-shadow: inset 10px 10px 100px 100px #000;
}

<div class="image"><img src="image.jpg" /></div>

score -2 · Answer 15 · edited Jun 23 '17 at 14:42

-2

Just try this code.

img:hover
{
    box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset; 
    -webkit-box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset; 
    -moz-box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset; 
    -o-box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset;
}

edited Jun 23 '17 at 14:42

Bugs

4,491
9
32
41

answered Jun 23 '17 at 14:06

rahul thakur

1

Darken background image on hover

15 Answers15

Using some content over the darkened overlay of the image

Linked

Related