case-studies-overflow-carousel

Summary

Magazine-style case-studies carousel: the section title and copy sit in a normal .container, while the slider lives in a .container-fluid and bleeds past the right edge of the viewport. Each slide is a tall image card with a dark overlay and bottom-anchored case title and category.

HTML structure (minimal)

<section class="overflow-hidden">
  <div class="container">
    <div class="row mb-3 g-4 align-items-center justify-content-between">
      <div class="col-lg-4">
        <div class="subtitle wow fadeInUp">Case Studies</div>
        <h2 class="wow fadeInUp" data-wow-delay=".2s">Proven Legal Success Case Studies</h2>
      </div>
      <div class="col-lg-4">
        <p class="wow fadeInUp" data-wow-delay=".4s">Legal expertise demonstrated through real cases...</p>
      </div>
      <div class="col-lg-2">
        <div class="de-custom-nav d-flex flex-end" data-target="#services-carousel">
          <div class="d-prev"></div>
          <div class="d-next"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12 wow fadeInUp" data-wow-delay=".6s">
        <div id="services-carousel" class="owl-2-cols-center owl-carousel owl-theme">
          <div class="item">
            <a href="case-study-single.html">
              <div class="hover rounded-1 relative overflow-hidden text-light">
                <div class="abs p-40 bottom-0 z-3">
                  <h3>Johnson vs. Metro Transit – Pedestrian Injury Settlement</h3>
                  <p class="mb-0 hover-mh-60">Personal Injury</p>
                </div>
                <div class="hover-op-05 bg-dark abs w-100 h-100 top-0 start-0 z-2"></div>
                <img src="images/case-studies/1.webp" class="w-100 hover-scale-1-2" alt="">
                <div class="gradient-edge-bottom h-50"></div>
              </div>
            </a>
          </div>
          <!-- 8 more .item slides -->
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

section.overflow-hidden > .container-fluid { padding-right: 0; }
.hover-op-05 { opacity: 0; transition: opacity .3s ease; }
.hover:hover .hover-op-05 { opacity: .5; }
.hover-mh-60 { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.hover:hover .hover-mh-60 { max-height: 60px; }
.hover-scale-1-2 { transition: transform .6s ease; }
.hover:hover .hover-scale-1-2 { transform: scale(1.2); }
.gradient-edge-bottom.h-50 {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 50%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.7));
}
.de-custom-nav .d-prev,
.de-custom-nav .d-next {
  width: 40px; height: 40px;
  border: 1px solid currentColor;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

Animation logic

const $svc = jQuery("#services-carousel").owlCarousel({
  loop: true,
  margin: 30,
  nav: false,
  dots: false,
  smartSpeed: 600,
  responsive: {
    0:    { items: 1 },
    767:  { items: 2 },
    1200: { items: 2.5 }
  }
});
// Wire custom prev/next buttons
$('.de-custom-nav[data-target="#services-carousel"] .d-prev')
  .on('click', () => $svc.trigger('prev.owl.carousel'));
$('.de-custom-nav[data-target="#services-carousel"] .d-next')
  .on('click', () => $svc.trigger('next.owl.carousel'));

Notable details

• responsive breakpoint of 2.5 items is the trick that creates the right-edge bleed — half a slide always peeks beyond the viewport.
• Each card layers four absolute children: the image, a transparent dark overlay (animates to .5 opacity on hover), a bottom gradient strip and the text block — clean separation of concerns.
• hover-mh-60 reveals the category subtitle by animating max-height instead of opacity, so it doesn't take vertical space until needed.
• de-custom-nav[data-target="..."] lets the same prev/next markup wire into any carousel by id without per-element JS.

Use when

• Editorial, agency or case-study showcases that want momentum and "more to see" affordance without a bare carousel.
• Designs where the title block needs space but you also want imagery to dominate horizontally.

Caveats

• The bleed assumes LTR; in RTL builds you must flip padding-right: 0 to padding-left: 0 and reverse the responsive items count's reading direction.
• Owl Carousel's responsive items count of 2.5 can render fractional widths inconsistently across browsers — visually verify in Safari.