Masonry Hover Lift
A copy-paste galleries & carousels component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Galleries & CarouselsHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-masonry">
<div class="nuda-masonry__cell" style="height:70px;background:..."></div>
<div class="nuda-masonry__cell" style="height:100px;background:..."></div>
<div class="nuda-masonry__cell" style="height:90px;background:..."></div>
<!-- More cells -->
</div>CSS
.nuda-masonry {
columns: 3;
column-gap: 6px;
}
.nuda-masonry__cell {
display: block;
width: 100%;
border-radius: 8px;
margin-bottom: 6px;
break-inside: avoid;
cursor: pointer;
transition:
transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.35s,
filter 0.35s;
}
.nuda-masonry:hover .nuda-masonry__cell { filter: brightness(0.7); }
.nuda-masonry__cell:hover {
transform: scale(1.08) rotate(-2deg);
box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.6);
filter: brightness(1.05) !important;
position: relative;
z-index: 1;
}How to use Masonry Hover Lift
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.