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="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-1614088459293-5669fadc3448?auto=format&fit=crop&w=1200&h=800&q=70" alt="Photo that gains colour on hover" class="fx-grayscale-to-color object-fit-cover rounded-3" 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; }
}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-1727622765649-1af1d87ee018?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">Travelling with kids: our tried and tested tips</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; }
}