Modern CSS Filter Effects
Grayscale, blur, hue, sepia, duotone and glow filters for photos, logos, icons and text.
1Brightness & Contrast
Images start slightly muted and pop with extra brightness and contrast on hover. Class: fx-brightness-contrast
<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-1758691737124-05c5bffe46f0?auto=format&fit=crop&w=1200&h=800&q=70" alt="Photo that brightens on hover" class="fx-brightness-contrast object-fit-cover rounded-3" style="width:200px;height:140px">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-brightness-contrast { filter: brightness(.82) contrast(.9); transition: filter .45s ease, transform .45s ease; }
.fx-brightness-contrast:hover, .fx-brightness-contrast:focus-visible { filter: brightness(1.12) contrast(1.2); transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
.fx-brightness-contrast, .fx-brightness-contrast::before, .fx-brightness-contrast::after, .fx-brightness-contrast *, .fx-brightness-contrast *::before, .fx-brightness-contrast *::after { animation: none !important; transition: none !important; }
}2Advanced 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-1531545514256-b1400bc00f31?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">Our favourite tips for busy weeks</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; }
}