expanding-project-tile

Summary

Six-up portfolio row of slim project cards (each col-lg-2). On hover, a hidden double-width overlay with a different image and a fuller title scales from 0 to 1, visually expanding the active tile into the next column's slot. The last child flips its transform-origin so the expansion goes left instead of overflowing the row.

HTML structure (minimal)

<section class="project-section">
  <div class="auto-container">
    <div class="sec-title centred">
      <span class="sub-title gradient-color">Our Portfolio</span>
      <h2>Explore Our Best Recently<br>Completed Projects</h2>
    </div>
    <div class="inner-container">
      <div class="row">
        <div class="col-lg-2 col-md-6 project-block">
          <div class="project-block-one">
            <div class="inner-box">
              <div class="static-content">
                <figure class="image-box"><img src="project-6.jpg" alt=""></figure>
                <div class="text-box"><h3><a href="project-details.html">The rise of design</a></h3></div>
              </div>
              <div class="overlay-content">
                <div class="image-box" style="background-image: url(project-1.jpg);"></div>
                <div class="text-box"><h3><a href="project-details.html">The rise of design Strategy Adventures</a></h3></div>
              </div>
            </div>
          </div>
        </div>
        <!-- 5 more project-block columns -->
      </div>
      <div class="more-text centred">
        <h3><a href="project-2.html"><span class="gradient-color">See Our Full Portfolio</span><i class="icon-3 gradient-color"></i></a></h3>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.project-block-one .inner-box {
  position: relative;
  margin-bottom: 15px;
}
.project-block-one .inner-box .image-box {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}
.project-block-one .inner-box .image-box::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(360deg, #1A1A1A 0%, rgba(26,26,26,0) 100%);
  z-index: 1;
}

.project-block-one .inner-box .overlay-content {
  position: absolute; left: 0; top: 0;
  width: calc(200% + 15px); /* takes over neighbour */
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  z-index: 5;
  transition: all 500ms ease;
}
.project-block-one .inner-box:hover .overlay-content {
  transform: scaleX(1);
  opacity: 1;
}

/* Last column flips so it doesn't overflow off-screen */
.project-block:last-child .project-block-one .inner-box .overlay-content {
  transform-origin: right center;
}

.project-block-one .inner-box .text-box {
  position: absolute; left: 0; bottom: 24px;
  padding: 0 30px;
  z-index: 2;
}
.project-block-one .inner-box .text-box h3 a { color: #fff; }

Notable details

• Width is calc(200% + 15px) to account for the parent column's padding (15px gutter) so the expanded card visually covers exactly two slots.
• transform-origin: right center on :last-child is the elegant fix for end-of-row overflow — no need for a different selector for the last item's text or sizing.
• The static image is an <img>, the overlay image is a CSS background-image. That choice lets the overlay cover with background-size: cover regardless of the image's intrinsic aspect ratio.
• A linear-gradient ::before on every image-box ensures the white title stays readable on any photo.

Use when

• Portfolio grids where you want one piece of hover interactivity that feels architectural rather than fluffy.
• Designs that already use a 6-column or 8-column grid where one extra column of bleed space exists.

Caveats

• On mobile (< 991px) the overlay drops to width: 100% — you lose the takeover effect and rely on the simpler hover scale.
• Six tiles assumed; rebalancing the columns means rebuilding the transform-origin overrides (e.g., wrapping rows of 4 instead of 6).
• The doubled image set per tile means double the assets; lazy-loading the overlay images is a worthwhile optimisation.