service-cards-grid

Summary

Two-by-two grid of teal-bordered service cards (Personal Injury, Family, Criminal Defense, Real Estate Law). Each card swaps its background to a per-card image plus a deep-teal gradient overlay on hover, and rotates the arrow-up-right icon in place of the link affordance.

HTML structure (minimal)

<div class="row row-cols-xl-2 row-cols-1">
  <div class="col mb-3">
    <div class="card card-service img-hover"
         style="--url-image: url(../image/personal-injury.jpg)">
      <div class="background-hover"></div>
      <div class="d-flex flex-row gap-3 justify-content-between p-5 position-relative" style="z-index:2;">
        <div class="d-flex flex-column gap-3">
          <h4>Personal Injury Law</h4>
          <p>Our personal injury lawyers are dedicated to securing fair compensation…</p>
        </div>
        <a href="service_detail.html">
          <i class="link rtmicon rtmicon-arrow-up-right fw-bold" style="font-size:30px;"></i>
        </a>
      </div>
    </div>
  </div>
  <!-- 3 more cards -->
</div>

Key SCSS tokens

.card-service {
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  position: relative;
  background-size: cover;
  background-position: center;
}
.card-service:hover {
  color: var(--primary);     /* white text */
  border: none;
}

.background-hover {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.card-service:hover .background-hover {
  opacity: 1;
  background: linear-gradient(95.57deg, rgba(4,56,63,0.8) -18.8%, #04383F 100%);
}

.card-service.img-hover:hover {
  background-image: var(--url-image);
}

.card .link        { color: var(--accent-color); }
.card:hover .link  { color: #fff; }

Notable details

• Per-card image is delivered via the --url-image CSS custom property in the inline style — one CSS rule (background-image: var(--url-image)) handles unique imagery for an arbitrary number of cards. Easy to wire to a CMS field.
• Two stacked layers do the work: .background-hover carries the gradient overlay, the parent carries the photo. Hovering toggles both — gives a clean teal wash on top of the image.
• Border collapses to none on hover so the card visually expands; the transition: all .5s on .card makes that read as a smooth fill.

Use when

• Service / practice-area grids where each card needs its own image without writing per-card CSS.
• Anywhere you'd otherwise reach for an image-text card with a hover state and a "go" arrow.

Caveats

• The arrow icon is the project's local rtmicons icon font, not FontAwesome — copy the font directory along with the markup.
• The --url-image paths in the demo use ../image/... because they're written for stylesheet context; if you swap to inline backgrounds in HTML use root-relative paths like image/....