The Stunning CSS Card Slider offers an engaging way to display content in a visually appealing card format. Each card features a vibrant background image and a sleek description overlay, creating an immersive experience for users. With smooth transitions and responsive design, this slider enhances your website’s interactivity, making it perfect for showcasing products, team members, or testimonials. Easy to implement and customize, the Stunning CSS Card Slider is a great addition to elevate your web presence.

<section class="celeb-section">
    <h2 class="line-title">Trending Celebrities</h2>
    <div class="owl-carousel custom-carousel owl-theme">
        <div class="item active" style="background-image: url('https://images6.alphacoders.com/475/475613.jpg');">
            <div class="item-desc">
                <h3>Leonardo DiCaprio</h3>
                <p>Leonardo DiCaprio is an acclaimed actor and environmental activist known for his roles in films like "Titanic" and "Inception."</p>
            </div>
        </div>
        <div class="item" style="background-image: url('https://images.alphacoders.com/494/494440.jpg');">
            <div class="item-desc">
                <h3>Scarlett Johansson</h3>
                <p>Scarlett Johansson is a versatile actress famous for her roles in "Lost in Translation" and the Marvel Cinematic Universe as Black Widow.</p>
            </div>
        </div>
        <div class="item" style="background-image: url('https://images8.alphacoders.com/128/1282233.jpg');">
            <div class="item-desc">
                <h3>Dwayne Johnson</h3>
                <p>Dwayne "The Rock" Johnson is a former professional wrestler turned actor, known for his roles in action films and comedies.</p>
            </div>
        </div>
        <div class="item" style="background-image: url('https://images8.alphacoders.com/378/378962.jpg');">
            <div class="item-desc">
                <h3>Jennifer Lawrence</h3>
                <p>Jennifer Lawrence is an Academy Award-winning actress known for her performances in "The Hunger Games" series and "Silver Linings Playbook."</p>
            </div>
        </div>
        <div class="item" style="background-image: url('https://picfiles.alphacoders.com/273/273700.jpg');">
            <div class="item-desc">
                <h3>Chris Hemsworth</h3>
                <p>Chris Hemsworth is best known for his role as Thor in the Marvel Cinematic Universe and is a prominent figure in Hollywood.</p>
            </div>
        </div>
    </div>
</section>

<style>
    @charset "utf-8";
    /* Fonts Import Start */
    @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
    /* Fonts Face CSS End */

    /* Common Element CSS Start */
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font-family: "Roboto", sans-serif;
        font-size: 16px;
		background-color: black;
    }
    .clear {
        clear: both;
    }
    img {
        max-width: 100%;
        border: 0;
    }
    ul,
    ol {
        list-style: none;
    }
    a {
        text-decoration: none;
        color: inherit;
        outline: none;
        transition: all 0.4s ease-in-out;
    }
    a:focus,
    a:active,
    a:visited,
    a:hover {
        text-decoration: none;
        outline: none;
    }
    a:hover {
        color: #e73700;
    }
    h2 {
        margin-bottom: 48px;
        padding-bottom: 16px;
        font-size: 20px;
        line-height: 28px;
        font-weight: 700;
        position: relative;
        text-transform: capitalize;
    }
    h3 {
        margin: 0 0 10px;
        font-size: 28px;
        line-height: 36px;
    }
    button {
        outline: none !important;
    }
    /* Common Element CSS End */

    /* Title Style */
    .line-title {
        position: relative;
        width: 400px;
		color: white;
    }
    .line-title::before,
    .line-title::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 4px;
        border-radius: 2px;
    }
    .line-title::before {
        width: 100%;
        background: #f2f2f2;
    }
    .line-title::after {
        width: 32px;
        background: #e73700;
    }

    /* Middle Section CSS Start */
    .celeb-section {
        padding: 60px 50px;
    }
    .celeb-section .owl-stage {
        margin: 15px 0;
        display: flex;
    }
    .celeb-section .item {
        margin: 0 15px 60px;
        width: 320px;
        height: 400px;
        display: flex;
        align-items: flex-end;
        background: #343434 no-repeat center center / cover;
        border-radius: 16px;
        overflow: hidden;
        position: relative;
        transition: all 0.4s ease-in-out;
        cursor: pointer;
    }
    .celeb-section .item.active {
        width: 500px;
        box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25);
    }
    .celeb-section .item:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    }
    .celeb-section .item-desc {
        padding: 0 24px 12px;
        color: #fff;
        position: relative;
        z-index: 1;
        overflow: hidden;
        transform: translateY(calc(100% - 54px));
        transition: all 0.4s ease-in-out;
    }
    .celeb-section .item.active .item-desc {
        transform: none;
    }
    .celeb-section .item-desc p {
        opacity: 0;
        transform: translateY(32px);
        transition: all 0.4s ease-in-out 0.2s;
    }
    .celeb-section .item.active .item-desc p {
        opacity: 1;
        transform: translateY(0);
    }
    .celeb-section .owl-theme.custom-carousel .owl-dots {
        margin-top: -20px;
        position: relative;
        z-index: 5;
    }
    /* Middle Section CSS End */
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
    $(".custom-carousel").owlCarousel({
        autoWidth: true,
        loop: true
    });
    $(document).ready(function () {
        $(".custom-carousel .item").click(function () {
            $(".custom-carousel .item").not($(this)).removeClass("active");
            $(this).toggleClass("active");
        });
    });
</script>

Credit:https://codepen.io/yudizsolutions/pen/wvzrPoj