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
A three-step skincare routine that works
<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-1718985342149-7178154e0aee?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">A three-step skincare routine that works</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; }
}