16

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!

user2953063
  • 437
  • 2
  • 6
  • 10

6 Answers6

1

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>
Byron
  • 593
  • 3
  • 10
0

Thanks for all the help. But off course right after I posted this I came upon an idea.

I use css to change the entire divs content to brightness 1.3 and than I change the text's brightness to 0.8 to even it out.

Like this:

JSFIDDLE

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

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

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

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

I just dont know the correct number 0.7 seems less bright than normal 0.8 seems little to bright.

user2953063
  • 437
  • 2
  • 6
  • 10
  • 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? – Agat Nov 04 '13 at 17:49
  • 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. – user2953063 Nov 04 '13 at 17:54
  • What's the problem with the easy approach I've suggested here: http://stackoverflow.com/a/19773431/691660? You want to use filter so much? he he – Agat Nov 04 '13 at 17:58
  • I dislike the kind of colors you receive using a gradient. I like the colors you get from a brightness filter the most. – user2953063 Nov 04 '13 at 18:43
0

Option 1: Try to make a white background image separately and replace its image on the hover effect.

option 2: the content of the background image tries to set it using position: absolute.

Paresh Chhatani
  • 1
0

Below is how I did my background to give it a nice orange glow, maybe you can do something similar to give your image some brightness?

body {
  background: linear-gradient(
      90deg,
      rgba(255, 140, 0, 0.459) 4%,
      rgba(196, 209, 8, 0.616) 53%,
      rgba(255, 132, 0, 0.692) 100%
    ),
    url(img/sunset1.jpg);
  background-size: cover;
  overflow-y: hidden;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
}
N. Swanepoel
  • 9
  • 3
  • 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](/help/how-to-answer). – Community Dec 01 '21 at 12:14
  • 2
    This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/30478277) – the Hutt Dec 02 '21 at 05:15
0

It is possible by using pseudo-elements. You must assign background to pseudo-elements and fill whole element by that.

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

#brightnessfilter:before{
    display:block;
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-image:url('http://i42.tinypic.com/351dff5.jpg');
}

#brightnessfilter:hover:before {
     -webkit-filter: brightness(1.3);
    -moz-filter: brightness(1.3);
    -o-filter:  brightness(1.3);
    -ms-filter:  brightness(1.3);
}
Amirreza Noori
  • 1,456
  • 1
  • 6
  • 20
0

I Used this tricks for my self

.demo-wrap {
  overflow: hidden;
  position: relative;
}

.demo-bg {
  opacity: 0.6;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.demo-content {
  position: relative;
}
<div class="demo-wrap">
  <img
    class="demo-bg"
    src="https://assets.digitalocean.com/labs/images/community_bg.png"
    alt=""
  >
  <div class="demo-content">
    <h1>Hello World!</h1>
  </div>
</div>

https://www.digitalocean.com/community/tutorials/how-to-change-a-css-background-images-opacity

Hossein Khalili
  • 172
  • 1
  • 8