Color transition area between image and block with colored background

user_1676032 0
Viewed 56

I have a screen divided into two parts, the first is an image and then when you scroll down there is block with text and a particular colored background.

As you can see in my demo, the change is very sudden and I would like to have a sortav blur between the image and the div with the text content. How can I do that?

const App = () => {

  return (
  <div className='wrapper'>
    <div className='hero'></div>
    <div className='content'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa enim nec dui nunc. Eu augue ut lectus arcu bibendum at varius vel pharetra. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Sed risus ultricies tristique nulla aliquet enim tortor at. Tortor condimentum lacinia quis vel. At imperdiet dui accumsan sit amet. Metus dictum at tempor commodo ullamcorper. Fames ac turpis egestas maecenas pharetra convallis posuere. Sit amet justo donec enim diam vulputate ut.


    </div>
  </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);
.wrapper {
        width: 300px;
        height: 300px;
}

.hero {
        width: 100%;
        height: 100%;

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    background-image: url("https://placekitten.com/1000");
}

.content {
  padding: 10px;
  padding-top: 20px;
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

reactjs css html javascript
2 Answers

Try adding a pseudo element on top of the image and applying a background gradient on it. I modified your example to show how it could be done.

const App = () => {

  return (
  <div className='wrapper'>
    <div className='hero'></div>
    <div className='content'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa enim nec dui nunc. Eu augue ut lectus arcu bibendum at varius vel pharetra. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Sed risus ultricies tristique nulla aliquet enim tortor at. Tortor condimentum lacinia quis vel. At imperdiet dui accumsan sit amet. Metus dictum at tempor commodo ullamcorper. Fames ac turpis egestas maecenas pharetra convallis posuere. Sit amet justo donec enim diam vulputate ut.


    </div>
  </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);
.wrapper {
   width: 300px;
   height: 300px;
}

.hero {
   position: relative;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-image: url("https://placekitten.com/1000");
}

.hero::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2rem;
   background: rgb(255,0,0);
   background: linear-gradient(180deg, rgba(255,0,0,0) 0%, rgba(255,0,0,1) 100%);
}

.content {
  padding: 10px;
  padding-top: 20px;
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

user_4407910

You can consider mask and it will work for all the images and background color

const App = () => {

  return ( <
    div className = 'wrapper' >
    <
    div className = 'hero' > < /div> <
    div className = 'content' >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Massa enim nec dui nunc.Eu augue ut lectus arcu bibendum at varius vel pharetra.Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi.Sed risus ultricies tristique nulla aliquet enim tortor at.Tortor condimentum lacinia quis vel.At imperdiet dui accumsan sit amet.Metus dictum at tempor commodo ullamcorper.Fames ac turpis egestas maecenas pharetra convallis posuere.Sit amet justo donec enim diam vulputate ut.


      <
      /div> <
      /div>
  )
}


ReactDOM.render( <
  App / > ,
  document.getElementById('app')
);
.wrapper {
  width: 300px;
}

.hero {
  height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("https://placekitten.com/1000");
  /* code added */
  margin-bottom:-30px;
  -webkit-mask:linear-gradient(#fff calc(100% - 30px), transparent);
  /**/
  
}

.content {
  padding: 10px;
  padding-top: 30px;
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

user_86203330
Related