Grayscale, blur, hue, sepia, duotone and glow filters for photos, logos, icons and text.
1Duotone Effect
Turns any photo into a two-colour print in the theme colours; put the class on a wrapper around the img. Class: fx-duotone-effect
<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-duotone-effect rounded-3 mb-0">
<img src="https://images.unsplash.com/photo-1783125127199-860da9744dcc?auto=format&fit=crop&w=1200&h=800&q=70" alt="Duotone photo" class="object-fit-cover" style="width:210px;height:145px">
</figure>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-duotone-effect { position: relative; display: inline-block; overflow: hidden; isolation: isolate; background: var(--wt-accent); }
.fx-duotone-effect img { display: block; filter: grayscale(1) contrast(1.2) brightness(1.1); mix-blend-mode: multiply; transition: filter .5s; }
.fx-duotone-effect::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: var(--wt-primary); mix-blend-mode: lighten; transition: opacity .5s;
}
.fx-duotone-effect:hover::after { opacity: 0; }
.fx-duotone-effect:hover img { filter: grayscale(0); mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
.fx-duotone-effect, .fx-duotone-effect::before, .fx-duotone-effect::after, .fx-duotone-effect *, .fx-duotone-effect *::before, .fx-duotone-effect *::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-1757524492552-d47a66a2b63e?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">Five things we learned this year</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; }
}