Case Studies Slider with Hover Description Effect

If you want to make your site stand out, this Case Studies Slider with Hover Description Effect is a great choice. It lets you display case studies or projects in a sleek and interactive way. Each slide has an image, company logo, and a description that only shows up when you hover over it. It’s simple but adds a dynamic touch to your site.

How It Works

This slider uses Slick Slider for smooth transitions. You get three case study slides at once, and when you hover over them, the description fades in. It’s a nice, subtle effect that keeps your site looking clean and modern.

Why You’ll Like It:

• Smooth animations – Slick and seamless sliding between case studies.
• Hover effects – Extra info shows when you hover, so the design stays minimal.
• Responsive – Works great on mobile and desktop.
• Easy to customize – Tweak colors and animations to match your style.

HTML Structure

<section class="case-studies">

    <div class="wrapper">
        
        <h2>Case Studies Slider with Hover Description Effect</h2>

        <div class="slick-slider sf-case-studies">
            <div class="item">
                <img class="item-photo" src="https://images.unsplash.com/photo-1726607424623-6d9fee974241?q=80&w=800&auto=format&fit=crop" alt="" />
                <div class="item-wrapper">
                    <div class="case-study">
                        <img class="company-logo" src="https://snippflow.com/tutorials/logos/logo-snippflow.svg" alt="" />
                        <div class="description">
                            <div>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt aut necessitatibus quasi totam.</p>
                            </div>
                        </div>
                    </div>
                    <a class="link" href="#">Go to Story</a>
                </div>
            </div>
            <div class="item">
                <img class="item-photo" src="https://images.unsplash.com/photo-1726138383736-3c848a2c7769?q=80&w=800&auto=format&fit=crop" alt="" />
                <div class="item-wrapper">
                    <div class="case-study">
                        <img class="company-logo" src="https://snippflow.com/tutorials/logos/logo-woo.svg" alt="" />
                        <div class="description">
                            <div>
                                <p>Exercitationem debitis facilis enim cupiditate modi repudiandae totam consequuntur labore tenetur aliquid non minus ducimus.</p>
                            </div>
                        </div>
                    </div>
                    <a class="link" href="#">Go to Story</a>
                </div>
            </div>
            <div class="item">
                <img class="item-photo" src="https://images.unsplash.com/photo-1596483941213-f9d3d65cf52d?q=80&w=800&auto=format&fit=crop" alt="" />
                <div class="item-wrapper">
                    <div class="case-study">
                        <img class="company-logo" src="https://snippflow.com/tutorials/logos/logo-wordpress.svg" alt="" />
                        <div class="description">
                            <div>
                                <p>Asperiores recusandae est sunt nihil at similique quasi perspiciatis perferendis.</p>
                            </div>
                        </div>
                    </div>
                    <a class="link" href="#">Go to Story</a>
                </div>
            </div>
            <div class="item">
                <img class="item-photo" src="https://images.unsplash.com/photo-1581091212991-8891c7d4bd9b?q=80&w=800&auto=format&fit=crop" alt="" />
                <div class="item-wrapper">
                    <div class="case-study">
                        <img class="company-logo" src="https://snippflow.com/tutorials/logos/logo-woo.svg" alt="" />
                        <div class="description">
                            <div>
                                <p>Asperiores recusandae est sunt nihil at similique quasi perspiciatis perferendis.</p>
                            </div>
                        </div>
                    </div>
                    <a class="link" href="#">Go to Story</a>
                </div>
            </div>
        </div>

    </div>

</section>

CSS Styling:

/* -------------------------------- */
/*   Snippflow Case Studies Slider  */
/* -------------------------------- */

.sf-case-studies {
    --sf-case-studies-item-hover-bg: rgba(33,33,33, 0.5);
    --sf-case-studies-item-description-color: rgba(255,255,255,.8);
    --sf-case-studies-item-link-color: #63D9B3;
    --sf-case-studies-pager-bg: rgba(0,0,0,.15);
    --sf-case-studies-pager-active-bg: #24A47B;
}

.sf-case-studies { margin: 0 -10px; }
.sf-case-studies .slick-list { overflow: visible; }
.sf-case-studies .slick-list:before { display: block; content: ""; position: absolute; right: 100%; top: 0; z-index: 1; height: 100%; width: 100vh; background-color: #f1f4f7; }
.sf-case-studies .slick-slide { padding: 0 10px; }
.sf-case-studies .slick-dots{ display: flex; justify-content: center; gap: 10px; list-style: none; margin: 20px 0;}
.sf-case-studies .slick-dots li button{ width: 12px; height: 12px; margin: 0; padding: 0; border: none; border-radius: 50%; background: var(--sf-case-studies-pager-bg); text-indent: -9999px; cursor: pointer}
.sf-case-studies .slick-dots li.slick-active button { background:var(--sf-case-studies-pager-active-bg); }

.sf-case-studies .item { position: relative; overflow: hidden; border-radius: 10px; }
.sf-case-studies .item .item-photo { display: block; max-width: 100%; height: auto; line-height: 0; }
.sf-case-studies .item .item-wrapper { display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all 0.3s ease-in-out }
.sf-case-studies .item .case-study { display: flex; flex-direction: column; align-items: center; width: 70%; text-align: center; }
.sf-case-studies .item .case-study .company-logo { max-height: 60px; max-width: 150px; }
.sf-case-studies .item .case-study .description {  display: grid; grid-template-rows: 0fr; color: var(--sf-case-studies-item-description-color); transition: all 0.3s ease-in-out; }
.sf-case-studies .item .case-study .description > div { overflow: hidden; padding-top: 30px; }
.sf-case-studies .item a.link { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); text-decoration: none; opacity: 0; color: var(--sf-case-studies-item-link-color); border-bottom: 1px solid transparent; font-weight: 600; transition: all 0.3s ease-in-out; animation-delay: 1s; }
.sf-case-studies .item a.link:hover { border-color: var(--sf-case-studies-item-link-color); }
.sf-case-studies .item:hover .item-wrapper { background-color: var(--sf-case-studies-item-hover-bg); }
.sf-case-studies .item:hover .item-wrapper .description { grid-template-rows: 1fr; }
.sf-case-studies .item:hover .item-wrapper a.link { opacity: 1; bottom: 40px; }

Result

See the Pen Case Studies Slider with Hover Description Effect by Snippflow (@snippflow) on CodePen.

See also