CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 2813

Darken background image on hover

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/

Upvotes: 71

Views: 212784

Answers (15)

Sabba Keynejad
Sabba Keynejad

Reputation: 8591

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

Upvotes: 98

stevec
stevec

Reputation: 52268

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

Upvotes: 5

Rory
Rory

Reputation: 2496

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'>

Upvotes: 31

Alon G
Alon G

Reputation: 3373

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

Upvotes: 6

rahul thakur
rahul thakur

Reputation: 1

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

Upvotes: -2

daniella
daniella

Reputation: 401

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>

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157324

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

Upvotes: 19

machinat
machinat

Reputation: 41

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!

Upvotes: 1

Roy M J
Roy M J

Reputation: 6938

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

Upvotes: 0

enam
enam

Reputation: 1177

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

Upvotes: 2

Praveen
Praveen

Reputation: 56511

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

}

You will get darken

Upvotes: 1

PSL
PSL

Reputation: 123739

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

Upvotes: 54

Falguni Panchal
Falguni Panchal

Reputation: 8981

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>

Upvotes: 2

Vucko
Vucko

Reputation: 20834

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

Upvotes: 7

Mohit Bhansali
Mohit Bhansali

Reputation: 1785

Add css:

.image{
    opacity:.5;
}

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

Upvotes: 2

Related Questions