<style>
#{page}-{section}-container .item-link .overlay {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.75) 95%);
z-index: 999;
}
#flex-example .flex-item {
/** https://css-tricks.com/snippets/css/a-guide-to-flexbox/ **/
flex: 0 0;
}
</style>
<div class="{page}-{section}-container-wrapper">
<div id="{page}-{section}-container" class="container">
<div class="row">
<div id="flex-example" class="col-lg-12 d-flex flex-wrap">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
<div class="col-lg-12">
<div id="{page}-{section}-carousel" class="owl-carousel owl-theme">
<div class="item">
<a href="#" class="item-link">
<div class="overlay"></div>
<img src="#" class="item-thumb">
<div class="item-text">
<h3 class="item-name"></h3>
<p class="item-desc"></p>
<!-- <a href="#" class="stretched-link">More</a> -->
</div>
</a>
</div>
<script>
jQuery(document).ready(function(){
jQuery('#{page}-{section}-carousel.owl-carousel').owlCarousel(
{
nav:true,
dots:true,
responsive:{
0:{
items:1
},
600:{
items:3
}
}
}
);
});
</script>
</div>
</div>
</div>
</div>
</div>
Related Keywords: Developer, How-to, Solved, HTML, CSS, Bootstrap Sample Template