3

I have a <div> with a background image and I'd like the background image to have a filter applied. But I'd also like the div to contain a <p> tag which overlays the image -- and I DONT want the <p> to have that same filter.

How do I clear the filter set by the <div> in the <p>?

What I've got so far:

<div className="artistDetailImage" style={{backgroundImage: url(${this.props.artistImage})`}}>
  <p className="artistDetailText">{name}</p>
</div>

.artistDetailImage {
  background-size: cover;
  background-position: top;
  width: 100%;
  height: 300px;
  filter: contrast(60%);
}

.artistDetailText {
  width: 100%;
  font-size: 20px;
  text-align: left;
  padding-left: 5px;
  position: relative;
  top: 240px;
  filter: none; //Have also tried contrast(100%), brightness(1), etc.
  color: white;
}

This answer seems to work, but I was hoping there was a better way to do it. https://stackoverflow.com/a/32677739/3010955

Peter Kaminski
  • 822
  • 1
  • 12
  • 21

1 Answers1

1

You won't be able to reset the filter for the child element, but you can encase both in a container div, then position the <p> accordingly.

.container-div {
  position: relative;
}

.artistDetailImage {
  background-size: cover;
  background-position: top;
  width: 100%;
  height: 300px;
  filter: contrast(60%);
}

.artistDetailText {
  width: 100%;
  font-size: 20px;
  text-align: left;
  padding-left: 5px;
  position: absolute;
  top: 240px;
  color: white;
}
<div class="container-div">
  <div class="artistDetailImage" style="background-image: url('http://static.pexels.com/photos/33688/delicate-arch-night-stars-landscape.jpg');">
  </div>
  <p class="artistDetailText">NAME</p>
</div>
Bobby Speirs
  • 667
  • 2
  • 7
  • 14
  • This works like a charm. What does the `position: relative` in the `container-div` do? – Peter Kaminski Aug 09 '17 at 17:43
  • 1
    @PeterKaminski The position: absolute in the paragraph element will position it relative to its nearest container element that is not position: static, so we set the parent container to position: relative. – Bobby Speirs Aug 09 '17 at 17:56