How do I make a dynamic background image opaque in React? - css

Question

I have blog posts each with a cover image. I want to use these images in my post listing page as an experiment to see if it will liven up the page a little bit.
The images are too bright. I either want the opacity lowered or an overlay must be added.
Changing the opacity will change the opacity of the text. Adding an overlay has positioned itself on top of the anchors rendering them useless.
I am using the Gatsby Casper Starter Kit in the event that you are interested.
PostListing.jsx
...
<PostFormatting className={className} key={title} cover={cover}>
<PostHeader>
<h2 className="post-title">
<Link to={path}>{title}</Link>
</h2>
...
PostFormatting.jsx
...
const style = cover ? { backgroundImage: `url(${cover})` } : {};
return <article className={className} style={style}>{children}</article>;
...
Generated HTML
<article class="post" style="background-image: url("https://picsum.photos/1280/500/?image=800");">
<header class="post-header">
<h2 class="post-title">
Test Post
</h2>
</header>
<section class="post-meta">
<span>
<span class="tag">Mindset</span>
<span class="tag">Productivity</span>
</span>
<time class="post-date" datetime="2017-06-27">27 June 2017</time>
</section>
<section class="post-excerpt"><p>...</p></section>
</article>
CSS
All the styles I have for the post element.
<element.style> {
background-image: url(https://picsum.photos/1280/500/?image=800);
}
.home-template .content .post,
.tag-template .content .post {
background-color: rgba(0, 0, 0, .1);
padding: 30px 50px 50px 50px;
}
.post {
position: relative;
width: 80%;
max-width: 710px;
margin: 4rem auto 0em auto;
padding-bottom: 4rem;
border-bottom: #1a232c 3px solid;
word-wrap: break-word;
}
I know about this method but I don't know how to get the image into the after pseudo element.
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Note: Try Radium for pseudo classes

Answer 1

U will have to put the overlay as a sibling of the content, and make it absolute.And also u will have to increase the z-index of the the content, so that it can be interactive.
In your case, all the elements inside the article should be grouped and put inside the content class.
Try this
.parent{
height:300px;
padding:50px;
position:relative;
}
.overlay{
position:absolute;
top:0;right:0;left:0;bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:0;
}
.content{
position:relative;
z-index:1;
font-size:25px;
color:white;
}
<div class="parent" style="background-image:url(http://via.placeholder.com/350x150)">
<div class="overlay"></div>
<div class="content">Test Test</div>
</div>