octavian octavian - 7 months ago 12
HTML Question

Have bright text over a darkened image

I have the following CSS component:

<div className="dimmed-image" style={itemStyle}>
<div className="bright-text">
<br/>
<h2 className="white-center">Some text</h2>
</div>
</div>


The
itemStyle
variable references a background image.

var itemStyle = {
backgroundImage: 'url(' + imageLocation + ')'
};


The
css
classes are these:

.dimmed-image {
-webkit-filter: brightness(60%);
}

.bright-text {
-webkit-filter: brightness(100%) !important;
}


I want to have white text over an image which is darkened.

However, if I use the code above, the text will also be darkened.

If I make two separate
div
classes like this:

<div className="dimmed-image" style={itemStyle}>
</div>
<div className="bright-text">
<br/>
<h2 className="white-center">Some text</h2>
</div>


Then the text will be placed beneath the image.

How can I have bright text on top of a darkened image?

Answer

To make the text jump back to the top of the image just apply position: absolute to the .dimmed-image:

.dimmed-image {
  ...
  position: absolute;
}

This will take the image outside the normal rendering and as long as you don't specify any other location will make it stay at the same place. Meanwhile the elements below (e.g. the text) will ignore the image and be rendered starting from the same point where the image starts.