Kreativstudio

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

HTML + CSSKarten

Karte mit verstecktem Inhalt

Eine hohe Karte, die nur ihren Titel zeigt, bis beim Hover Beschreibung und Button von unten hochgleiten.

Einstellungen

16px
1x

Code

<div class="uv-kr"><div class="c"><h3>Kreativstudio</h3><p>Design, Branding und digitale Produkte – mit viel Liebe gemacht.</p><button>Mehr anzeigen</button></div></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Mehr aus Karten

Wofür du ihn nutzen kannst

Eine Reveal-Karte hält ein Raster auf den ersten Blick ruhig und liefert Details erst auf Nachfrage. Sie passt zu den Leistungen einer Designagentur, zu Projekten in einem Portfolio, zum Kurskatalog einer Online-Akademie oder zu den Bereichen einer Speisekarte. Im Ruhezustand sieht man unten nur den Titel, beim Hover kommen ein kurzer Text und ein „Mehr ansehen“-Button hoch.

Auf dem Handy erscheint der versteckte Teil erst nach einem Tippen, der Titel muss also für sich allein verständlich sein. Ersetz den Verlauf durch ein Foto, dann wirkt sie persönlicher, und lass die dunkle Abdunklung unter dem Text, damit er lesbar bleibt.