Duotone Hover
A copy-paste image effects component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Image EffectsHTMLCSSany framework
Copy into your project
HTML
<!-- Duotone Hover -->
<figure class="nuda-ie2-duotone">
<img class="nuda-ie2-duotone__img" src="/your-image.jpg" alt="" />
<span class="nuda-ie2-duotone__tint" aria-hidden="true"></span>
</figure>CSS
.nuda-ie2-duotone {
position: relative;
width: 200px;
height: 140px;
border-radius: 10px;
overflow: hidden;
margin: 0;
cursor: pointer;
}
.nuda-ie2-duotone__img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: grayscale(100%) contrast(1.2);
transition: filter .6s ease;
}
.nuda-ie2-duotone__tint {
position: absolute;
inset: 0;
background: linear-gradient(135deg,#e4ff54,#0a0a0a);
mix-blend-mode: color;
opacity: 1;
transition: opacity .6s ease;
}
.nuda-ie2-duotone:hover .nuda-ie2-duotone__img {
filter: grayscale(0%) contrast(1);
}
.nuda-ie2-duotone:hover .nuda-ie2-duotone__tint {
opacity: 0;
}
@media (prefers-reduced-motion:reduce) {
.nuda-ie2-duotone__img,.nuda-ie2-duotone__tint {
transition: none !important;
}
}
How to use Duotone Hover
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.