Hover Sound Card

This effect is free — the Atmosphere category contains 57 effects total, including 10 free. Effect.Labs has 811 vanilla effects. Explore the category →

View in catalogue Free account

Usage examples

Platform

Everything you need to build.

Explore our core features — hover to discover.

① Hero / Landing — Feature highlight card

WhenLanding page hero for a SaaS or portfolio: one or more cards showcasing key product benefits.

WhyThe micro-lift on hover signals interactivity without any script or loading cost — the card 'reacts' to visitor interest.

Settingsborder-radius: 16px, transition: 0.4s ease (smoother), translateY(-6px) for a stronger lift, slightly denser background: rgba(99,102,241,0.15).

Why teams choose us

6 built-in superpowers

② Product component — Feature grid

WhenFeatures or Services section: several cards side by side with icon + label, each selectable.

WhyWhen every card responds with the same lift, the grid feels alive — visitors intuitively understand each item is clickable.

SettingsBrand color: replace #6366f1 with your primary. Transition 0.2s for snappier response in a dense grid. translateY(-3px) for a subtle lift on small cards.

Pick your plan

No credit card required · Cancel anytime

Starter

0€

forever free

3 projects 5 GB storage Community support
5 Go stockage
Support communauté

Popular

Pro

9€

/ month

Unlimited projects 50 GB storage Priority support
50 Go stockage
Support prioritaire

Team

29€

/ month

Everything in Pro 500 GB storage Dedicated support
500 Go stockage
Support dédié

③ Conversion micro-interaction — Pricing plan selector

WhenPricing page: each plan is a card; hover signals the targeted plan before clicking 'Choose'.

WhyLift + border change visually confirm the hovered plan — reduces hesitation before the CTA click.

Settingsborder: 2px solid for stronger visual impact; transition: 0.2s for immediate response; add box-shadow: 0 8px 24px rgba(99,102,241,0.25) on :hover.

How it works

The effect relies entirely on the CSS :hover selector paired with a transition: 0.3s rule. On hover, the background shifts from rgba(99,102,241,0.1) to rgba(99,102,241,0.2) and the border from rgba(99,102,241,0.2) to rgb(99,102,241) — the browser interpolates both states automatically, with no JavaScript or requestAnimationFrame.

The vertical movement is produced by transform: translateY(-4px) on :hover. translateY runs on the GPU compositing path: no reflow, no layout recalculation per frame — the motion is essentially free in rendering cost.

The base palette uses the indigo hue #6366f1 (Tailwind Indigo-500) broken into rgba() for background and border. The transition: 0.3s declaration without an explicit property list covers all modified properties in one line — convenient, but slightly less efficient than transition: transform 0.3s, border-color 0.3s, background 0.3s if additional properties are animated elsewhere.

Accessibility

prefers-reduced-motion: absent from the code — no OS preference check. Add @media (prefers-reduced-motion: reduce) { .snd-hover-card { transition: none; } } if your context requires it.
No aria-* attributes in the base HTML. If the card is interactive (link or button), add role="button" (or wrap in a native <button>) and a descriptive aria-label.
The effect is hover-only — it does not respond to keyboard :focus. For visible focus, add .snd-hover-card:focus-visible { outline: 2px solid #6366f1; outline-offset: 3px; transform: translateY(-4px); }.
cursor: pointer is present — correct affordance. Verify that var(--text-secondary) on the label meets WCAG AA contrast (≥ 4.5:1) against your page background.
On mobile, :hover fires on the first tap (state persists until a tap elsewhere): the lift works, but the experience differs from desktop.

Browser compatibility

Pure CSS — transitions and transform supported in all browsers since 2012. No external dependencies, no JavaScript.

Chrome 26+✓ Full

Firefox 16+✓ Full

Safari 9+✓ Full

Edge 12+✓ Full

Mobile iOS✓ Hover = 1st tap

Android Chrome✓ Hover = 1st tap

Without CSS transitions (extremely old browsers), the card remains visible and clickable — only the animation is missing. No JS errors.

The code

Copy the three blocks into your page. No dependencies.

HTML

<div class="snd-hover-card" id="sndHoverCard">
  <div class="snd-hover-icon">🎵</div>
  <div class="snd-hover-label">Survolez-moi</div>
</div>

CSS

.snd-hover-card  {
   width: 180px;
   padding: 20px;
   border-radius: 12px;
   background: rgba(99, 102, 241, 0.1);
   border: 1px solid rgba(99, 102, 241, 0.2);
   text-align: center;
   transition: 0.3s;
   cursor: pointer;
   }

.snd-hover-card:hover  {
   transform: translateY(-4px);
   border-color: rgb(99, 102, 241);
   background: rgba(99, 102, 241, 0.2);
   }

.snd-hover-icon  {
   font-size: 2rem;
   margin-bottom: 8px;
   }

.snd-hover-label  {
   font-size: 0.8rem;
   color: var(--text-secondary);
   }

JavaScript (fx-0526)

// Effet CSS pur — pas de JavaScript nécessaire

Customize

Options passed to the API or data-* attributes:

Option / property	Default	Effect
.snd-hover-card { width }	180px	Card width. Use % or max-content for a responsive grid.
.snd-hover-card { border-radius }	12px	Corner radius. 0 = sharp square, 16–24px = softer modern look.
.snd-hover-card { transition }	0.3s	Animation duration. 0.15s = snappy, 0.5s = slow and smooth. Add an easing: `0.3s cubic-bezier(0.34,1.56,0.64,1)` for a slight spring bounce at the end of the lift.
.snd-hover-card:hover { transform }	translateY(-4px)	Lift amplitude and direction. `translateY(-8px)` for a strong lift, `scale(1.03)` for volumetric emphasis, or combine both.
rgba(99, 102, 241, …)	#6366f1 Indigo-500	Card base color: replace `99, 102, 241` throughout the CSS with the RGB components of your brand color, or define `--brand-rgb: 99 102 241` and use `rgba(var(--brand-rgb), 0.1)`.
.snd-hover-card:hover { box-shadow }	absent	Add `box-shadow: 0 8px 24px rgba(99,102,241,0.30)` on `:hover` for a Material-style elevation that reinforces the lift.
.snd-hover-icon { font-size }	2rem	Icon size. Replace the 🎵 emoji with any emoji or an inline SVG in the HTML.

FAQ

The name says 'Hover Sound Card' but I hear no sound — is that expected?

Yes. This effect's code is pure CSS: no JavaScript, no Web Audio API. The animation is a visual lift only (transform + transition). To add hover audio, wire it in JS: document.querySelector('.snd-hover-card').addEventListener('mouseenter', () => { const ctx = new AudioContext(); const o = ctx.createOscillator(); o.frequency.value = 880; o.connect(ctx.destination); o.start(); o.stop(ctx.currentTime + 0.05); }).

How do I make the card keyboard accessible?

Wrap it in a native <button> or <a href>, or add tabindex="0" to the .snd-hover-card. Then add in your CSS: .snd-hover-card:focus-visible { outline: 2px solid #6366f1; outline-offset: 3px; transform: translateY(-4px); } so keyboard focus triggers the same lift as hover.

How do I switch the card to a different brand color?

Replace all three occurrences of rgba(99, 102, 241, …) in the CSS with your color's RGB components. Example with Emerald (#10b981): rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.2), and rgb(16, 185, 129). To centralize, define :root { --brand: 16,185,129; } and use rgba(var(--brand), 0.1) throughout.

Related effects — Atmosphere

See all Atmosphere effects →

Fundamentals

Design & Visuals

Animations & Scroll

Gallery & More