Manish Pushkar Jha

Full Stack Web Developer
May 8, 2021
6:51 am

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

87 Views  •  April 19th, 2020  •  2 minutes read

Hi!

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>

Answer:

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
}