What it looks like
It works like turning over a playing card on a table. The front holds whatever you want, such as a photo with a name on top; the back is a semi-transparent black panel with light text and inner padding. On hover, the card turns 180 degrees in half a second with 3D perspective and the back appears; when the cursor leaves, it turns back. By default it flips sideways, but it can also flip top to bottom like a desk calendar. The default size is 224 by 288 pixels, with generously rounded corners.
You may be looking for this if you asked for something like
- a card that flips over and shows something else on hover
- front and back cards to introduce my team
- that playing card flip effect for my site
- a photo on the front and a description on the back of the card
- FAQ cards that turn over to show the answer
- a service card that spins around to show the price
Also known as
- flip card
- card flip animation
- 3D flip card
- two-sided card
- rotating card
- flip on hover
When to use
- A team page with a photo on the front and a short bio on the back
- A service list with the name on the front and details or price on the back
- Visual FAQs, with the question on the front and the answer on the back
- Product or benefit cards on a landing page
When to avoid
- Essential content only on the back, since the flip relies on hover and the original handles neither touch nor focus
- Long text on the back, which gets cramped at the default card size
How to ask your AI
Create a two-sided flip card that turns 180 degrees on hover with 3D perspective. I want it to flip on tap on phones and on keyboard focus too, use my theme colors and have a version without the flip for people who prefer reduced motion.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Valete
Does Valete work on phones?
In its original form, Valete flips only on hover, through CSS, with no touch handling. On phones the result depends on each browser, and the back may never show. The THM Componentes prompt asks for mobile testing; it is worth asking your AI to flip the card on tap and on keyboard focus as well.
Can Valete flip top to bottom?
Yes. Valete has a rotate prop: with y, the default, the card turns sideways like a playing card; with x, it flips top to bottom. The front goes in the main content and the back in its own slot called back, so each side can hold a photo, text or buttons.
Will Valete slow down my site?
Usually not. Valete uses only a CSS 3D transform and transition, with no animation JavaScript, and it is rated Light in THM Componentes. In grids with many cards, the front images usually weigh more than the flip itself.
