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

User · Answer

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!

User · Answer

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   lt div class  image  gt  lt  div gt

User · Answer

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

User · Answer

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

User · Answer

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      lt div class  image  gt  lt img src  image jpg    gt  lt  div gt

User · Answer

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

User · Answer

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

User · Answer

If you want to darken the image  use an overlay element with rgba and opacity properties which will darken your image     Demo   lt div gt  lt span gt  lt  span gt  lt  div gt   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

User · Answer

image hover      background   000      width  58px      height  58px      border-radius 60px       You will get darken

User · Answer

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

User · Answer

Add css    image      opacity  5      image hover         CSS properties     opacity 1

User · Answer

Here is a  quot shade quot  class that you can add directly to any  lt img gt  tag like so  lt img src  quot imgs myimg png quot  class  quot shade quot  gt   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

User · Answer

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

User · Answer

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    x000D   x000D  img hover  x000D    filter  brightness 50    x000D    x000D   lt img src  https   via placeholder com 300  gt  x000D   x000D   x000D

User · Answer

How about this  using an overlay    image hover  gt   overlay       width 100       height 100       position absolute      background-color  000      opacity 0 5      border-radius 30px      Demo

[html] Darken background image on hover

Examples related to html

Examples related to css