I have a problem with owl caroussel, i tried in many ways to remove the overlay but not working, i want to keep the original colors of picture, can someone help me to find a solution ?
I'm a beginner with use of caroussel. I can't find where i have to change this setting.
You can see the caroussel of my template.
<section class="banner-section banner-one banner-one-page" id="home">
<div class="banner-carousel owl-theme owl-carousel">
<!-- Slide Item -->
<div class="slide-item">
<div class="image-layer" style="background-image: url(images/main-slider/2.jpg);"></div>
<div class="auto-container">
<div class="content-box">
<div class="content">
<div class="inner text-center">
<div class="sub-title">welcome to Linoor agency</div>
<h1>Discover <br> <span>new linoor agency</span></h1>
<div class="link-box">
<a class="theme-btn btn-style-one" href="about.html">
<i class="btn-curve"></i>
<span class="btn-title">Discover More</span>
</a>
<div class="vid-link">
<a href="https://www.youtube.com/watch?v=Get7rqXYrbQ"
class="lightbox-image">
<div class="icon"><span class="flaticon-play-button-1"></span><i
class="ripple"></i></div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here you can see all files in JS,CSS folder : https://imgur.com/Rl0MbcJ
Here you can see the template : http://layerdrops.com/linoor/one-page.html
Any carousel item has an before pseudo-element with this styles:
.banner-carousel .slide-item:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--thm-black);
opacity: 0.6;
z-index: 1;
}
if you add in your css file the style .banner-carousel .slide-item:before { display: none; }, you will remove the translucent black overlay.