css only affect for only first div

Question

i have a problem for this case.

html code :

<div class="col-md-4 col-12 kotakartikelhome1">
   <div class="sentence">               
   </div>
</div>

css :

.kotakartikelhome1{
    background-image: url("img/artikelhome1.jpg");
    filter: brightness(50%);
    background-size: 100% 100%;
    transition-duration: 0.5s;
    height: 400px;
    position: relative;
}

i just set for kotakartikelhome1 in filter for decrease the brightness, because i set it for my background image. then everything when i put anything inside sentence's class, everything getting dark, how to set those filter only affect the first div?

Try this, replace the filter with whatever you need: https://codepen.io/akademy/pen/FlkzB — Adam Fratino, May 22 '18 at 15:45
why is not working on me? .kotakartikelhome1:before{ content: ""; position: fixed; left: 0; right: 0; z-index: -1; display: block; background-image: url('img/artikelhome1.jpg'); filter: brightness(50%); background-size: 100% 100%; transition-duration: 0.5s; height: 400px; } — Kenny Nataniel, May 23 '18 at 08:10

score 2 · Answer 1 · answered May 22 '18 at 15:47

2

filter is a css property that affects the entire div, and thus anything inside it. So all child divs will also have that filter 'in front' of them.

If you just want to darken your background image, then I would suggest using a css3 gradient fallback.

background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('img/artikelhome1.jpg');

This will give you a 50% opacity black overlay.

answered May 22 '18 at 15:47

Brett East

4,022
2
20
31

This solution does work. – Tom May 22 '18 at 15:54

score 0 · Answer 2 · answered May 22 '18 at 15:51

Check this out:

.kotakartikelhome1{
    background-image: url(http://via.placeholder.com/350x150);
    background-size: 100% 100%;
    transition-duration: 0.5s;
    height: 400px;
    filter: brightness(50%);
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1;
}
.sentence {
    color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9999;
}

<div class="col-md-4 col-12">
  <div class="kotakartikelhome1"></div>
   <div class="sentence">        
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto sit excepturi quod nam molestias! Sit deleniti odit harum repellendus quam molestiae, natus commodi sint accusantium animi eos, ad tempore!
   </div>
</div>

Tom Headifen · Answer 3 · 2018-05-22T15:52:23.773

-2

Put an id on the first element and add the styling to that.

<div class="col-md-4 col-12 kotakartikelhome1" id="darken">
   <div class="sentence">               
   </div>
</div>
<div class="col-md-4 col-12 kotakartikelhome1">
   <div class="sentence">               
   </div>
</div>

<style>
    .kotakartikelhome1{
        background-image: url("img/artikelhome1.jpg");
        background-size: 100% 100%;
        transition-duration: 0.5s;
        height: 400px;
        position: relative;
    }

    #darken{
        filter: brightness(50%);
    }

    .sentence{
        filter: brightness(100%);
    }
</style>

edited May 22 '18 at 15:52

answered May 22 '18 at 15:40

Tom Headifen

1,885
1
18
35

1

The container's children will still inherit the filter property. – Adam Fratino May 22 '18 at 15:44
Yes, That is how css works. you will need to use different divs as above if you only want one to be affected. You could overwrite the brightness in the sentence div again if you really want that behaviour. edited above – Tom Headifen May 22 '18 at 15:50

css only affect for only first div

3 Answers3