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-1517836357463-d25dfeac3438?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; }
}2Neon Glow
Wraps icons, logos and transparent images in a flickering neon halo using drop-shadow. Class: fx-filter-neon-glow
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<div class="bg-dark rounded-4 p-4 d-flex gap-4 fs-1">
<span class="fx-filter-neon-glow"><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i></span><span class="fx-filter-neon-glow"><i class="bi bi-music-note-beamed" aria-hidden="true"></i></span><span class="fx-filter-neon-glow"><i class="bi bi-moon-stars-fill" aria-hidden="true"></i></span>
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-filter-neon-glow {
color: var(--wt-primary-ink);
filter: drop-shadow(0 0 4px var(--wt-primary)) drop-shadow(0 0 12px var(--wt-primary));
animation: fx-filter-neon-glow-flicker 3s linear infinite;
}
@keyframes fx-filter-neon-glow-flicker {
0%, 18%, 22%, 62%, 64%, 100% { filter: drop-shadow(0 0 4px var(--wt-primary)) drop-shadow(0 0 12px var(--wt-primary)); }
20%, 63% { filter: drop-shadow(0 0 1px var(--wt-primary)); }
}
@media (prefers-reduced-motion: reduce) {
.fx-filter-neon-glow, .fx-filter-neon-glow::before, .fx-filter-neon-glow::after, .fx-filter-neon-glow *, .fx-filter-neon-glow *::before, .fx-filter-neon-glow *::after { animation: none !important; transition: none !important; }
}3Duotone 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-1541534741688-6078c6bfb5c5?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; }
}