Badger3000onlineRésumé
Experiments
Back to Experiments
Codepen

Slide Reveal Card

A hover-interactive card that reveals content through animated transitions.

Published

slide-reveal-card
codepen.io/badger3000/pen/xbxoEmp(opens in a new tab)

About this pen

A hover-interactive card that reveals content through animated transitions. The card features a digital art theme with an image that slides up on hover, revealing additional information beneath. The design includes floating background shapes with subtle animations, a gradient overlay that expands on hover, and staggered entrance animations for text content and buttons. When hovering, elements slide up from the bottom with smooth cubic-bezier timing, while background shapes continuously float with keyframe animations. The JavaScript adds a parallax effect to the image during mouse movement, creating depth as the cursor moves across the card.

More in Codepen

View all →
Badger3000Kyle's AI
New conversationExplore
Appearance
Kyle RossPrescott, AZ