Modern CSS Filter Effects

Grayscale, blur, hue, sepia, duotone and glow filters for photos, logos, icons and text.

1Invert Colors

Flips an image or card to its negative on hover while hue-rotate keeps the colours recognisable. Class: fx-invert-colors

Ten questions to ask at a viewing

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
  <div class="card fx-invert-colors" style="width:12rem">
    <img src="https://images.unsplash.com/photo-1748063578185-3d68121b11ff?auto=format&fit=crop&w=1200&h=800&q=70" alt="Card photo" class="card-img-top object-fit-cover" style="height:110px"> 
    <div class="card-body py-2">
      <p class="small mb-0 fw-semibold">Ten questions to ask at a viewing</p>
    </div>
  </div>
</div>

/* CSS (already in assets/css/effects.css) */
.fx-invert-colors { transition: filter .4s ease; }
.fx-invert-colors:hover, .fx-invert-colors:focus-visible { filter: invert(1) hue-rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .fx-invert-colors, .fx-invert-colors::before, .fx-invert-colors::after, .fx-invert-colors *, .fx-invert-colors *::before, .fx-invert-colors *::after { animation: none !important; transition: none !important; }
}

2Multiple Filters

Stacks contrast, saturation and a drop shadow, then swaps to a warmer combination on hover. Class: fx-multiple-filters

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
  <img src="../assets/img/product-3.svg" alt="Product with layered filters" class="fx-multiple-filters object-fit-contain" style="width:150px;height:150px">
</div>

/* CSS (already in assets/css/effects.css) */
.fx-multiple-filters { filter: contrast(1.15) saturate(1.3) drop-shadow(0 10px 14px rgba(var(--wt-primary-rgb), .35)); transition: filter .5s ease; }
.fx-multiple-filters:hover { filter: contrast(1.25) saturate(1.6) sepia(.25) drop-shadow(0 16px 22px rgba(var(--wt-accent-rgb), .45)); }
@media (prefers-reduced-motion: reduce) {
  .fx-multiple-filters, .fx-multiple-filters::before, .fx-multiple-filters::after, .fx-multiple-filters *, .fx-multiple-filters *::before, .fx-multiple-filters *::after { animation: none !important; transition: none !important; }
}

3Text Filter Effects

Headings come into focus from a blur with a coloured drop shadow - a cinematic title reveal. Class: fx-text-filter-effects

Home is closer than you think

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
  <h2 class="h2 fw-bold text-primary text-center mb-0 fx-text-filter-effects">Home is closer than you think</h2>
</div>

/* CSS (already in assets/css/effects.css) */
.fx-text-filter-effects { filter: drop-shadow(0 4px 10px rgba(var(--wt-primary-rgb), .45)); animation: fx-text-filter-effects-focus 5s ease-in-out infinite; }
@keyframes fx-text-filter-effects-focus {
  0% { filter: blur(8px) drop-shadow(0 4px 10px rgba(var(--wt-primary-rgb), 0)); opacity: .2; letter-spacing: .25em; }
  30%, 85% { filter: blur(0) drop-shadow(0 4px 10px rgba(var(--wt-primary-rgb), .45)); opacity: 1; letter-spacing: normal; }
  100% { filter: blur(0) drop-shadow(0 4px 10px rgba(var(--wt-primary-rgb), .45)); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-text-filter-effects, .fx-text-filter-effects::before, .fx-text-filter-effects::after, .fx-text-filter-effects *, .fx-text-filter-effects *::before, .fx-text-filter-effects *::after { animation: none !important; transition: none !important; }
}