JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.transitions.min.css">
<div id="owl-example" class="owl-carousel some-fancy-slider">
    <li>
        <div class='some-fancy-slider-content'>Hover me and Ill show you a trick</div>
    </li>
    <li>
        <div class='some-fancy-slider-content'>Hover me and Ill show you a trick</div>
    </li>
    <li>
        <div class='some-fancy-slider-content'>Hover me and Ill show you a trick</div>
    </li>
    <li>
        <div class='some-fancy-slider-content'>Hover me and Ill show you a trick</div>
    </li>
    <li>
        <div class='some-fancy-slider-content'>Hover me and Ill show you a trick</div>
    </li>
</div>

CSS

*,*:before,*after{
    box-sizing: border-box;
}

.some-fancy-slider{
    margin-top: 50px;
}


.some-fancy-slider li{
    height: 150px;/*play around with the height here*/
    color: #fff;
    list-style: none;
    padding: 0;
}
/*play around with your transition, effects, bgs here*/
.some-fancy-slider-content{
    position: absolute;
    bottom: 10px; left: 10px; right: 10px;
    height: 50px;
    background: green;
    text-align: center;
    transition: all .2s;
}
.some-fancy-slider-content:before{
    content: '';
    position: absolute;
    z-index: -1;
    background: maroon;
    left: -10px; right: -10px; bottom: -10px;
    height: 70px;
}
.some-fancy-slider-content:hover{
    height: 130px;/*check height of li parent*/
}

/*joking around*/
.some-fancy-slider-content:after{
    content: 'TADAAAAA!';
    display: block;
    opacity: 0;
    font-size: 40px;
    text-align: center;
    transition: all .2s;
}
.some-fancy-slider-content:hover:after{
    opacity: 1;
}

JavaScript

$(document).ready(function() {
 
  $("#owl-example").owlCarousel();
 
});