Creative studio

Diseño, marca y producto digital con mucho cariño.

HTML + CSSCards

Hover reveal card

A tall card that shows only its title until hover, when the description and a button slide up from below.

Settings

16px
1x

Code

<div class="uv-kr"><div class="c"><h3>Creative studio</h3><p>Design, branding and digital products, made with love.</p><button>See more</button></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 reveal card keeps a grid calm at first glance and gives details on demand. It works for the services of a design agency, projects in a portfolio or the menu sections of a restaurant. At rest you see a title at the bottom; on hover a short text and a “See more” button rise into view.

On phones the hidden part only appears after a tap, so the title has to make sense on its own. Swap the gradient for a photo to make it feel more personal, and keep the dark overlay under the text so it stays readable.