Change brightness of JUST the background with CSS

Question

I want to change the brightness of a DIV's background, without affected the other contents in a div.

When I apply a hover brightness filter on the div, other elements in it are also affected. Which I do not want.

The other solution I have is simply replacing the background of the div with a photo edited one. But that asks for double the storage, which I do not like.

Is there a way to change just the brightness of the background-image?

JSFIDDLE

    <div id="replace">
    <div id="transparent">
        <span id="text">Random unaffected text</span>
    </div>
</div>

    <div id="brightnessfilter">
    <div id="transparent">
        <span id="text">Random AFFECTED text (it glows)</span>
    </div>
</div>

#replace {
width:700px;
height:465px;
background-image:url('http://i42.tinypic.com/351dff5.jpg');
}

#brightnessfilter {
    width:700px;
    height:465px;
    background-image:url('http://i42.tinypic.com/351dff5.jpg');
}

#brightnessfilter:hover {
     -webkit-filter: brightness(1.3);
-moz-filter: brightness(1.3);
-o-filter:  brightness(1.3);
-ms-filter:  brightness(1.3);
}

#transparent {
    position:relative;
    top:400px;
    width:700px;
    height:65px;
    background-color:rgba(0,0,0,.5);
    border-radius:8px;
}

#text {
    color:white;
    font-weight:bold;
    position:relative;
    top:9px;
    left:9px;
    font-size:16px;
}

#replace:hover {
    background-image:url('http://i40.tinypic.com/2cft7dl.jpg');
}

Above here is a link to a fiddle with my two attempts at creating the desired effect. But both have a disadvantage in using it.

Thanks in advance!

Solution

To apply the brightness to only the background image, you can place the image in a absolute positioned div so that the brightness only affects this element.

Setting the height and width to 100% on the new #image div will allow it to fill #brightnessfilter div in order to preserve the layout from your initial example.

#brightnessfilter {
  width: 700px;
  height: 465px;
  position: relative;
}

#image {
  background-image: url('http://i42.tinypic.com/351dff5.jpg');
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
}

#brightnessfilter:hover #image {
  -webkit-filter: brightness(1.3);
  -moz-filter: brightness(1.3);
  -o-filter: brightness(1.3);
  -ms-filter: brightness(1.3);
}

#transparent {
  position: relative;
  top: 400px;
  width: 700px;
  height: 65px;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 8px;
}

#text {
  color: white;
  font-weight: bold;
  position: relative;
  top: 9px;
  left: 9px;
  font-size: 16px;
}

#replace:hover {
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.01) 100%), url('http://i40.tinypic.com/2cft7dl.jpg');
}

<div id="brightnessfilter">
  <div id="image"></div>
  <div id="transparent">
    <span id="text">Random AFFECTED text (it glows)</span>
  </div>
</div>

Comments

[Agat]

I would not say that that's a really flexible approach... What if you add any other elements inside that box? You will be applying the filter to each new component separatly as well? What's about changes? To apply changes on every of those again?

[user2953063]

True, But the content will always be the same. Only the background image and text will change over time. but the ammount of elements will never change in this case.

[Agat]

What's the problem with the easy approach I've suggested here: stackoverflow.com/a/19773431/691660? You want to use filter so much? he he

[user2953063]

I dislike the kind of colors you receive using a gradient. I like the colors you get from a brightness filter the most.

[Admin]

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

[the Hutt]

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review