1

Basically, I am using Bootstrap 4 Carousel and I am using a <div> with position:absolute; to put the gradient effect on top of it but I want the text to be visible on top.

When the slide changes you will see the Text is grey for some seconds and then changed into white.

When I remove my gradient from the top everything works fine. I feel like something is wrong with my code structure.

<div style="position:absolute; height: 100vh; width: 100%; z-index: 1; background: linear-gradient(180deg, rgba(40, 63, 48, 0.9) 0%, rgba(40, 63, 48, 0) 100%);"></div>

My Fiddle: https://jsfiddle.net/ibadullah/ob4r5gjy/8/

Any help will be highly appreciated.

Thank You.

IUK
  • 66
  • 1
  • 9
  • I don't understand your question. Are you asking to make the menu bar that says "Some text will be here ..." sticky at the top? Running your code in the jsfiddle, I do not see the grey to white issue you talked about. – Nick Feb 16 '21 at 20:36
  • @Nick I am talking about the text which is over the Bootstrap Carousel. I have updated my fiddle the text was at the bottom before that's why it wasn't purely visible. Please check now. The text above the Carousel is just dummy text which shows the layout. Thanks. – IUK Feb 16 '21 at 20:42

0 Answers0