CODEWITHSUNDEEP
cssreactjsgatsby
Clarice Bouwer
Clarice Bouwer

Reputation: 3811

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

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>;
...

Blog post image that is difficult to read

Generated HTML

<article class="post" style="background-image: url(&quot;https://picsum.photos/1280/500/?image=800&quot;);">
    <header class="post-header">
        <h2 class="post-title">
            <a href="/blog/rewire-your-brain-7">Test Post</a>
        </h2>
    </header>
    <section class="post-meta">
        <span>
            <span class="tag"><a href="/tags/mindset">Mindset</a></span>
            <span class="tag"><a href="/tags/productivity">Productivity</a></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

Upvotes: 1

Views: 2561

Answers (1)

Gautam Naik
Gautam Naik

Reputation: 9338

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>

Upvotes: 1

Related Questions