Putting a filter on a specific element inside an ID

Question

When putting a filter on the image inside the ID I created both background and text get filtered, when my intention is just to lower the brightness of the background

I've tried making spererate classes and ID, but nothing worked the way I wanted it to.

HTML

<section id="showcase">
      <div class="container">
        <h1>Hello</h1>
        <p>I need to type something in here</p>
      </div>
    </section>

CSS

#showcase{
  min-height: 400px;
  background:url('../img/writing-code33.jpg');
  filter: brightness(20%);
  background-size: cover;
  text-align: center;
  color: #ffffff;
}
/*#showcase background{
  filter: brightness(20%);
}*/

#showcase h1{
  margin-top: 100px;
  font-size: 55px;
  margin-bottom: 10px;
}

I would take the `. container ` outside the `#showcase` and wrap both in a div - for example. Next I would position the `.container` absolute over the `#showcase` — enxaneta, Jul 14 '19 at 16:36

score 0 · Accepted Answer · answered Jul 14 '19 at 16:49

0

The filter on #showcase is applied to all its children. So you need to move the content outside of it. Try the following solution. This will also move the text to top and horizontally centered.

HTML

<section id="showcase"></section>
<div class="container">
   <h1>Hello</h1>
   <p>I need to type something in here</p>
</div>

CSS

#showcase {
  min-height: 400px;
  background: url('../img/writing-code33.jpg');
  filter: brightness(20%);
  background-size: cover;
}

.container {
  position: absolute;
  color: #ffffff;
  text-align: center;
  top: 0px;
  left: 50%;
  transform: translate(-50%);
}

#showcase h1 {
  margin-top: 100px;
  font-size: 55px;
  margin-bottom: 10px;
}

answered Jul 14 '19 at 16:49

Waleed Iqbal

1,308
19
35

It seems to be working, but the text is outside the #showcase area – Jul 14 '19 at 16:56
With the given html and css, it's working fine on my side. It's possible that there are some other styles that may be causing the text to appear outside `#showcase` – Waleed Iqbal Jul 14 '19 at 16:59
Alright, thanks for your help, I think I have it figured out now – Jul 14 '19 at 17:00

Putting a filter on a specific element inside an ID

1 Answers1