Blur to Focus
A copy-paste image effects component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Image EffectsHTMLCSSany framework
Copy into your project
HTML
<!-- Blur to Focus -->
<figure class="nuda-blur">
<img class="nuda-blur__img" src="/your-image.jpg" alt="" />
</figure>CSS
/* Blur to Focus
Image starts soft + blurred, sharpens on hover.
Customize: --blur-amount, --blur-duration */
.nuda-blur {
--blur-amount: 10px;
--blur-duration: 0.6s;
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 12px;
overflow: hidden;
margin: 0;
cursor: pointer;
}
.nuda-blur__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(var(--blur-amount)) saturate(0.7);
transform: scale(1.08);
transition:
filter var(--blur-duration) ease,
transform var(--blur-duration) ease;
}
.nuda-blur:hover .nuda-blur__img {
filter: blur(0) saturate(1);
transform: scale(1);
}How to use Blur to Focus
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.