Darken background image on hover
HtmlCssHtml Problem Overview
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/
Html Solutions
Solution 1 - Html
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;
}
That will do it, Hope that helps.
Thank you Robert Byers for your jsfiddle
Solution 2 - Html
How about this, using an overlay?
.image:hover > .overlay {
width:100%;
height:100%;
position:absolute;
background-color:#000;
opacity:0.5;
border-radius:30px;
}
Solution 3 - Html
If you want to darken the image, use an overlay element with rgba and opacity properties which will darken your image...
<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..
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;
}
Solution 4 - Html
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'>
Solution 5 - Html
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;
}
Solution 6 - Html
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
Solution 7 - Html
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;
}
Solution 8 - Html
Add css:
.image{
opacity:.5;
}
.image:hover{
// CSS properties
opacity:1;
}
Solution 9 - Html
try this
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>
Solution 10 - Html
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;
}
Solution 11 - Html
.image:hover {
background: #000;
width: 58px;
height: 58px;
border-radius:60px;
}
You will get darken
Solution 12 - Html
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!
Solution 13 - Html
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');
}
}
Solution 14 - Html
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>
Solution 15 - Html
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;
}