Reveal Card
A copy-paste cards & hover component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Cards & HoverHTMLCSSany framework
Copy into your project
HTML
<!-- Reveal Card — content reveals on hover with slide -->
<div class="nuda-reveal-card">
<div class="nuda-reveal-card__front">
<h3 class="nuda-reveal-card__title">Reveal Card</h3>
</div>
<div class="nuda-reveal-card__overlay">
<p>Hidden content slides up on hover.</p>
</div>
</div>CSS
/* ── Reveal Card ─────────────────────────────────────────────
Customize:
--nuda-rc-bg : card background
--nuda-rc-overlay : overlay background
--nuda-rc-clr : front text color
--nuda-rc-clr-over : overlay text color
--nuda-rc-radius : corner radius
--nuda-rc-speed : slide duration
──────────────────────────────────────────────────────────── */
.nuda-reveal-card {
--nuda-rc-bg: linear-gradient(135deg, #312e81, #1e1b4b);
--nuda-rc-overlay: rgba(99, 102, 241, 0.95);
--nuda-rc-clr: #e0e7ff;
--nuda-rc-clr-over: #fff;
--nuda-rc-radius: 16px;
--nuda-rc-speed: 0.4s;
position: relative;
width: 280px;
height: 200px;
border-radius: var(--nuda-rc-radius);
overflow: hidden;
background: var(--nuda-rc-bg);
cursor: pointer;
}
.nuda-reveal-card__front {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--nuda-rc-clr);
}
.nuda-reveal-card__title {
font-size: 1.1rem;
font-weight: 700;
margin: 0;
}
.nuda-reveal-card__overlay {
position: absolute;
inset: 0;
background: var(--nuda-rc-overlay);
color: var(--nuda-rc-clr-over);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
font-size: 0.9rem;
transform: translateY(100%);
transition: transform var(--nuda-rc-speed) cubic-bezier(0.22, 1, 0.36, 1);
}
.nuda-reveal-card:hover .nuda-reveal-card__overlay {
transform: translateY(0);
}
/* Keyboard focus support */
.nuda-reveal-card:focus-within .nuda-reveal-card__overlay {
transform: translateY(0);
}
/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.nuda-reveal-card__overlay {
transition: none;
transform: none;
opacity: 0;
}
.nuda-reveal-card:hover .nuda-reveal-card__overlay,
.nuda-reveal-card:focus-within .nuda-reveal-card__overlay {
opacity: 1;
}
}How to use Reveal Card
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.