How to make background image of div go darker on mouseover

Question

I have this code:

<a style="text-decoration:none;" href="https://www.google.pt"> 
  <div class="xxxx">
    <h3 style="color:#FFFFFF; padding-top:25%;">Bla bla bla bla</h3>
  </div> 
</a>

With this CSS class:

.xxxx{
  text-align:center;
  vertical-align:middle;
  background-image:url(images/img.jpg);
  max-width:100%;
  width:400px;
  height:300px;
}

My question is, what should I do to make the background image of the div go darker when the mouse is over, but just the image, the text stays the same.

Answer 1

You can use css filters :

-webkit-filter: brightness(0.222);

More about filters https://davidwalsh.name/demo/css-filters.php

Hope this helps!

Answer 2

You can do it with another image

.xxxx:hover
{
    background-image:url(images/img_darker.jpg);
}

where img_darker is darker version of the img you use.

EDİT:

a:hover .xxxx{
   background-image:url(images/img_darker.jpg);
}

Answer 3

I hope this helps

http://jsfiddle.net/audetwebdesign/8QMTv/

 <button class="btn-img">
        <div class="img-wrap">
        <img src="http://upload.wikimedia.org/wikipedia/en/thumb/2/2a/Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg/220px-Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg" alt="Dubai" />
        </div>
    </button>

.btn-img {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: white;
    outline: 1px dotted blue;
}
.btn-img .img-wrap {
    margin: 10px;
}

.btn-img img {
    display: block;
}

.btn-img:hover .img-wrap {
    background-color: black;
}

.btn-img:hover img {
    opacity: 0.8;
}

Answer 4

you may use :

• linear gradient

• inset shadow

• background-blend-mode

• filter but forget IE at this time

 h1 { background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(http://lorempixel.com/100/100/abstract/10); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(http://lorempixel.com/100/100/abstract/10); } h1:hover { background: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(http://lorempixel.com/100/100/abstract/10); background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(http://lorempixel.com/100/100/abstract/10); } h2, h3, h4 { background: url(http://lorempixel.com/100/100/abstract/10); } h2:hover { box-shadow: inset 0 0 0 500px rgba(0, 0, 0, 0.2); } h3 { background-color: rgba(0, 0, 0, 0.2); } h3:hover { background-blend-mode: color; } h4:hover { -webkit-filter: brightness(80%); filter: brightness(80%) } 

 <h1>title</h1> <h2>title</h2> <h3>title</h3> <h4>title</h4> 

codepen to play with

---

you may use gradinets to give some effects hover the background http://codepen.io/gcyrillus/pen/rexVWR add/remove gradients, change colors, change background-size, actually you may lay any pattern over the background-image :)

Answer 5

You can use before preselector and filter brightness

HTML

<a style="text-decoration:none;" href="https://www.google.pt"> 
  <div class="xxxx">
    <h3 style="color:#FFFFFF; padding-top:25%;">Bla bla bla bla</h3>
  </div> 
</a>

CSS

.xxxx{
  text-align:center;
  vertical-align:middle;
  max-width:100%;
  width:400px;
  height:400px;
  z-index:100;
  position:relative;
}
.xxxx:before{
  position:absolute;
  max-width:100%;
  width:400px;
  height:400px;
  top:0;
  left:0px;
  content:" ";
  background-image:url(https://images.blogthings.com/thecolorfulpatterntest/pattern-1.png);
  z-index:1;
}
h3{
  z-index:100;
  position:relative;
}

.xxxx:hover:before{ filter: brightness(0.3); }

Example

Answer 6

Check out this little Fiddle Does it solve your problem?

you have to put another div (in gray or black) above the picutre, then it seems to get darker while hovering.

.yyyy{ 
position:absolute;opacity:0;width: 400px;height: 300px;background-color: #000000;}
.yyyy:hover{
 opacity: 0.3;
}