Halftone 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
<!-- Halftone Hover -->
<figure class="nuda-ie2-halftone">
<img class="nuda-ie2-halftone__img" src="/your-image.jpg" alt="" />
<span class="nuda-ie2-halftone__dots" aria-hidden="true"></span>
</figure>CSS
.nuda-ie2-halftone {
position: relative;
width: 200px;
height: 140px;
border-radius: 10px;
overflow: hidden;
margin: 0;
cursor: pointer;
background: #0a0a0a;
}
.nuda-ie2-halftone__img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: contrast(1.1);
}
.nuda-ie2-halftone__dots {
position: absolute;
inset: 0;
background-image: radial-gradient(circle,#09090b 40%,transparent 42%);
background-size: 8px 8px;
opacity: .9;
transition: opacity .5s ease;
animation: _nuda-ie2halftone 9s linear infinite;
will-change: background-position;
}
.nuda-ie2-halftone:hover .nuda-ie2-halftone__dots {
opacity: 0;
}
@keyframes _nuda-ie2halftone {
0% {
background-position: 0 0;
}
100% {
background-position: 8px 8px;
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-ie2-halftone__dots {
animation: none !important;
background-position: 0 0;
}
}
How to use Halftone 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.