Hover effect

Media Monks Hover

by Vanguardia · motionprompts.dev

A dark film-studio work-list where hovering each project flips the whole panel to that project's pastel tint and lifts every row's opacity via CSS transitions, while a tilted strip of film-still previews behind the text repositions (top/left) and swaps its active card to reveal the matching project, plus an arrow icon that slides in from the left edge of a pill button on the hovered row.

Type: Web motion
Framework: Vanilla JS
Trigger: hover
Duration: 0.2–1s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: css-transition
Complexity: 1/5
Pinned: no
Reduced motion: handled
Libraries: phosphor-icons

row hover tints the whole panel (background-color 0.5s ease) and slides the tilted preview strip to a new top/left over 1s, while the active .prev nudges rotate(10deg)->rotate(12.5deg) and the strip fades 0.45->0.9 opacity; an arrow pill wipes in with a 0.2s delay on the incoming glyph

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev19,065 charsCustomize

# Work-List Hover — Pastel Panel Flip + Tilted Preview Reveal

## Goal
Build a full-viewport, dark **"just went live" work list**: an intro line, three big proj…

The build prompt

More like this

A pixel wizard casting spells

Rainbow Road Pixel Animation

One-File Generative Visual Demo

Pixel-art rabbit archer sprite animation loop

Vibe-Coded Pixel Wizard Game

Realistic 3D Taj Mahal Model

Fresh recipes, every week.