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.
Diese dynamische Info-Karte bietet eine visuelle Darstellung mit Titel und Text, und reagiert auf Hover-Effekte.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Diese interaktive Karte zeigt ein Bild, einen Titel und eine kurze Beschreibung, wobei sie auf Hover-Effekte reagiert und zusätzliche Inhalte ansprechend präsentiert.
.jpg)
This is a wider card with supporting text below as a natural lead-in to additional content. This ...
.jpg)
This card has supporting text below as a natural ...
This is a wider card with supporting text below as a natural lead-in to additional content. This card ...
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content ...
Diese interaktiven Karten nutzen CSS-Animationen und JavaScript, um dem Benutzer ein dynamisches und ansprechendes Erlebnis zu bieten. Wenn der Benutzer mit der Maus über eine Karte fährt, wird ein zusätzlicher Beschreibungstext elegant eingeblendet, der von unten nach oben gleitet. Gleichzeitig verdunkelt sich das Bild, um den Fokus auf den Text zu lenken.
Das Bild auf der Karte wird standardmäßig angezeigt, und beim Hover-Effekt erscheint der Beschreibungstext. Dieser Text fährt sanft nach oben und wird vollständig sichtbar. Der "Read More"-Button bietet dem Benutzer die Möglichkeit, weitere Informationen zu erhalten.
Die Animationen werden durch CSS-Schlüsselbild-Animationen (@keyframes) gesteuert, die die Position und Sichtbarkeit des Beschreibungstextes verändern. CSS-Übergänge sorgen dafür, dass die Animationen fließend und geschmeidig ablaufen und ein nahtloses Benutzererlebnis bieten. Zusätzlich wird JavaScript verwendet, um die Helligkeit des Bildes bei Hover-Effekten zu steuern und so die visuelle Interaktivität zu verstärken.
