Cards
Eine "Card" in HTML ist ein gestalterisches Container-Element, das genutzt wird, um zusammengehörige Informationen kompakt und optisch ansprechend darzustellen. Cards sind vielseitig und werden häufig verwendet, um Inhalte wie Texte, Bilder, Links und andere Medien in einem abgegrenzten Bereich zu organisieren. Sie sind besonders nützlich in responsivem Design, da sie leicht skalierbar und anpassbar sind.
Card-Galerie mit Bild und Text
Dieses Beispiel zeigt eine Card-Galerie mit Bild und Text. Die Cards präsentieren Reiseziele und kombinieren Bild und Text, um Orte wie New York, Las Vegas, Singapur und Tokio hervorzuheben. Jede Card verfügt über einen dynamischen Hover-Effekt, der die Aufmerksamkeit auf das Bild lenkt und zusätzliche visuelle Tiefe schafft.
New York
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Las Vegas
Lorem ipsum dolor sit amet consectetur adipisicing elit. At vero eos et accusam et justo duo
Singapore
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tokio
Lorem ipsum dolor.
Interaktive Karte mit Bild und Text
Diese interaktive Card-Komponente kombiniert Bild, Titel und Beschreibung in einem responsiven Layout. Ein halbtransparenter Farbverlauf auf dem Bild sorgt beim Hover für einen modernen visuellen Effekt.
.jpg)
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This ...
.jpg)
Card title
This card has supporting text below as a natural ...
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card ...
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content ...
Interaktive Karten mit CSS Animationen
Diese interaktiven Cards nutzen CSS-Animationen für einen modernen Hover-Effekt. Beim Überfahren der Karte wird zusätzlicher Text eingeblendet, während sich das Bild abdunkelt.
Der Beschreibungstext gleitet von unten nach oben in die Karte und wird dabei sichtbar. So entsteht ein klarer Fokus auf Inhalt und Call-to-Action.
Die Bewegung wird mit @keyframes und CSS-Übergängen gesteuert.
Dadurch wirken die Animationen flüssig und gut nachvollziehbar.
