Currently utilizing jQuery Owl Carousel, I have successfully implemented an image slider in which I aim to overlay a background color on the slider image.
Update as of 2019: now directs to a suspicious website.
Here is the HTML markup:
<!-- HEADER-02 CONTENT -->
<div class="header-02-sub">
<!-- SLIDER STARTS HERE -->
<div id="owl-slider" class="owl-carousel owl-theme">
<div class="item">
<img src="http://placehold.it/1600x700" alt="The Last of us">
<div class="caption">
<h1>SOME TITLE HERE</h1>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1600x700" alt="The Last of us">
<div class="caption">
<h1>SOME TITLE HERE</h1>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1600x700" alt="The Last of us">
<div class="caption">
<h1>SOME TITLE HERE</h1>
</div>
</div>
</div>
<!-- SLIDER ENDS HERE -->
</div>
<!-- END HEADER-02 CONTENT -->
I've attempted to apply this CSS styling:
.header-02-sub {
background-color:red;
z-index:9999999;
witdth:100%;
height:100%;
}
Efforts were made to add this code to the parent #owl-slider or .item elements, but it did not yield the desired outcome.
For further reference, view this JSBin link
If you have any insights on how to successfully overlay a background color on the slide image, please share your suggestions.