partner-logo-row

Summary

Five-up partner-logo strip on a deep-teal background. Each logo is desaturated and brightened to white-ish by default and recolors back to its native palette on hover.

HTML structure (minimal)

<div class="section bg-accent-color">
  <div class="r-container">
    <div class="row row-cols-xl-5 row-cols-md-2 row-cols-1">
      <div class="col p-4 mb-3">
        <div class="d-flex justify-content-center">
          <img src="image/Logo1.png" class="img-fluid logo-partner" alt="" width="100%">
        </div>
      </div>
      <!-- ×5 -->
    </div>
  </div>
</div>

Key SCSS tokens

.bg-accent-color { background: var(--accent-color); }

.logo-partner {
  filter: brightness(200%) contrast(0%) saturate(0%) blur(0) hue-rotate(0deg);
  transition-duration: .5s;
}
.logo-partner:hover { filter: none; }

Notable details

• The "white-out then recolor on hover" trick uses a single filter chain rather than two image variants — works for any color logo without manual SVG edits.
• Five-column grid that gracefully steps down to two on tablet and one on phone via Bootstrap's row-cols-* utilities.
• The teal background is deliberately darker than the logos' original colors so the desaturation reads as bright neutrals rather than muddy greys.

Use when

• Trust-building logo rows on dark hero/section backgrounds where the logos arrive in mixed colors and you can't easily get monochrome SVGs.
• Any time you want a "neutral by default, brand on hover" treatment without preparing two image sets.

Caveats

• The demo HTML uses raw <img class="img-fluid"> without the logo-partner class on every logo — apply .logo-partner consistently if you want the filter effect on all of them.
• filter on <img> is rasterized; very small logos can lose detail when desaturated this aggressively.