How to create overlay effects on carousel without knowledge of photoshop?

Date: April 19th, 2020
Category: Questions, 187 Views

Asked by: Jahnavi Chaudhary, Location: Thane, India


I am 2 years experienced UI developer, I am using ‘Bootstrap 4’ for one of my project.

I don’t know Photoshop, how to give a dark overlay effect on my carousel so that carousel texts will be visible.

My Codes
<div id="slide" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#slide" data-slide-to="0" class="active"></li> <li data-target="#slide" data-slide-to="1"></li> <li data-target="#slide" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/banner-1.jpg" alt=""> <div class="carousel-caption"> <h3>We are mumbai based design agency</h3> <p>lorem ipsum doler sit amet</p> </div> </div> <div class="carousel-item"> <img src="banner-2.jpg" alt=""> </div> <div class="carousel-item"> <img src="banner-3.jpg" alt=""> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#slide" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#slide" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div>


Hi Jahnavi,

You can do this via css, add these lines in your css file.

.carousel-item:after { content:""; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.4); //change overlay color and opacity here }
Share my post: 

One response to “How to create overlay effects on carousel without knowledge of photoshop?”

Leave a Reply

Your email address will not be published. Required fields are marked *