One page · Front-end interface
Carte Animee: an interactive feature that lets users hide information on a card and reveal it on hover.
The animated card is an interactive feature that lets users hide information on a card and reveal it on hover. This feature is very useful for surfacing additional information to a broad audience without having to display everything at once.
It also lets users discover interesting, relevant information without having to actively search for it. It can be used to display geographic data, statistics, or even details about a car.
This project lets me demonstrate clean integration and a command of micro-interactions in CSS and JS. It shows that I can structure a one-page interface, handle a hover behavior in a restrained and readable way, and animate a content reveal without weighing down the page. It is a concrete training ground for making an interface feel alive while keeping code that is simple to read and to build upon.
The challenge
Design a card that surfaces content on demand: hide the information by default, then reveal it smoothly on hover, without cluttering the interface or weighing down the page.
The solution
- Card structure in HTML, with the detailed information present in the markup from the start.
- Styling and the reveal transition handled in CSS, for a smooth and lightweight animation.
- Management of the shown or hidden state on hover in JavaScript, triggering the change in the card's appearance.
Reveal on hover
The card's information is hidden by default then revealed on hover, thanks to state management in JavaScript combined with a CSS transition.
Restrained CSS animation
The transition between the closed and open states is animated in pure CSS, for a smooth and lightweight result, with no dependency or superfluous effect.
One-page integration
A single page structured in HTML and styled in CSS, designed as an exercise in clean, readable integration of the card components.
Desktop version
Tablet version
Carousel Vertical
Discover a new way to scroll through your photos, with a vertical carousel.
Carte QR Code
Carte QR Code is a build based on the Frontend Mentor challenges, starting from a design image to recreate a one-page layout from scratch with HTML & CSS.
Carte Recapitulatif Commande
Order Summary Card is a build based on the Frontend Mentor challenges, starting from an image design to recreate a one-page layout from scratch with HTML & CSS.
A project along the same lines?
Tell me about your needs — I'll quickly let you know what's relevant and realistic.