Modern CSS Filter Effects
Grayscale, blur, hue, sepia, duotone and glow filters for photos, logos, icons and text.
1Grayscale to Color
Keeps images black and white until they are hovered or focused - ideal for logo walls and team grids. Class: fx-grayscale-to-color
<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
<img src="https://images.unsplash.com/photo-1773828755374-0ee802d9f44b?auto=format&fit=crop&w=1200&h=800&q=70" alt="Photo that gains colour on hover" class="fx-grayscale-to-color object-cover rounded-lg" style="width:150px;height:110px"><img src="../assets/img/logo-2.svg" alt="Partner logo" class="fx-grayscale-to-color" style="width:110px;height:auto">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-grayscale-to-color { filter: grayscale(1); transition: filter .5s ease; }
.fx-grayscale-to-color:hover, .fx-grayscale-to-color:focus-visible, :focus-visible > .fx-grayscale-to-color { filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) {
.fx-grayscale-to-color, .fx-grayscale-to-color::before, .fx-grayscale-to-color::after, .fx-grayscale-to-color *, .fx-grayscale-to-color *::before, .fx-grayscale-to-color *::after { animation: none !important; transition: none !important; }
}2Invert Colors
Flips an image or card to its negative on hover while hue-rotate keeps the colours recognisable. Class: fx-invert-colors
What we learned from last year's feedback
<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
<div class="card fx-invert-colors" style="width:12rem">
<img src="https://images.unsplash.com/photo-1762968274962-20c12e6e8ecd?auto=format&fit=crop&w=1200&h=800&q=70" alt="Card photo" class="card-img-top object-cover" style="height:110px">
<div class="card-body py-2">
<p class="small mb-0 font-semibold">What we learned from last year's feedback</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; }
}3Text Filter Effects
Headings come into focus from a blur with a coloured drop shadow - a cinematic title reveal. Class: fx-text-filter-effects
Learn from the best, meet the rest
<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
<h2 class="h2 font-bold text-primary-ink text-center mb-0 fx-text-filter-effects">Learn from the best, meet the rest</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; }
}