Hover over me
Frente
¡Hola!
Este es el dorso de la tarjeta.
HTML + CSSCards
3D flip card
A card that turns over in 3D on hover to show a second face on its back.
Settings
16px
1x
Code
<div class="uv-kf"><div class="in"><div class="f"><h3>Hover over me</h3><p>Front</p></div><div class="b"><h3>Hi!</h3><p>This is the back of the card.</p></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
Where to use it
A flip card hides a second layer of information behind the first. It is handy for team pages (photo on the front, a short bio on the back), vocabulary flashcards in a language course or a services page where the front names the service and the back lists what's included. It turns with a slight bounce.
On touch screens, whether the card flips on tap depends on the browser, so never hide anything essential on the back. The card has a fixed height; keep the back text to a few lines or it will overflow.