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
Budgeting basics for small teams
<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-1551135049-8a33b5883817?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">Budgeting basics for small teams</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; }
}2Glitch Filter
Short bursts of hue, contrast and position jumps make an image look like a corrupted signal. Class: fx-glitch-filter
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<img src="https://images.unsplash.com/photo-1526948531399-320e7e40f0ca?auto=format&fit=crop&w=1200&h=800&q=70" alt="Photo with a glitch filter" class="fx-glitch-filter object-fit-cover rounded-3" style="width:200px;height:140px">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-glitch-filter { animation: fx-glitch-filter-glitch 3.5s steps(1) infinite; }
@keyframes fx-glitch-filter-glitch {
0%, 86%, 100% { filter: none; transform: none; }
88% { filter: hue-rotate(90deg) saturate(3) contrast(1.6); transform: translate(-4px, 1px); }
90% { filter: invert(.15) contrast(2); transform: translate(4px, -2px) skewX(6deg); }
92% { filter: hue-rotate(-70deg) saturate(2); transform: translate(-2px, 0); }
94% { filter: brightness(1.6); transform: translate(2px, 1px); }
}
@media (prefers-reduced-motion: reduce) {
.fx-glitch-filter, .fx-glitch-filter::before, .fx-glitch-filter::after, .fx-glitch-filter *, .fx-glitch-filter *::before, .fx-glitch-filter *::after { animation: none !important; transition: none !important; }
}3Advanced Combo
A figure whose blurred, muted image sharpens and zooms on hover while a frosted caption slides up. Class: fx-advanced-combo
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<figure class="fx-advanced-combo rounded-3">
<img src="https://images.unsplash.com/photo-1758518729685-f88df7890776?auto=format&fit=crop&w=1200&h=800&q=70" alt="Featured story" class="object-fit-cover" style="width:220px;height:150px">
<figcaption class="small fw-semibold">What to look for in a business account</figcaption>
</figure>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-advanced-combo { position: relative; overflow: hidden; display: inline-block; margin: 0; }
.fx-advanced-combo img { display: block; filter: grayscale(.5) blur(1px) brightness(.85); transform: scale(1.05); transition: filter .5s, transform .6s; }
.fx-advanced-combo figcaption {
position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .8rem; color: #fff;
background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(8px) saturate(1.4); backdrop-filter: blur(8px) saturate(1.4);
transform: translateY(100%); transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.fx-advanced-combo:hover img, .fx-advanced-combo:focus-within img { filter: none; transform: scale(1.12); }
.fx-advanced-combo:hover figcaption, .fx-advanced-combo:focus-within figcaption { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.fx-advanced-combo, .fx-advanced-combo::before, .fx-advanced-combo::after, .fx-advanced-combo *, .fx-advanced-combo *::before, .fx-advanced-combo *::after { animation: none !important; transition: none !important; }
}