CSS Card Design mit hover effect Animation | HTML + CSS Tutorial Deutsch

Hol dir bei Hostinger das beste Webhosting, um deine Webseite online zu stellen: https://www.hostinger.de/kurzundknapp
Mit dem Coupon-Code: KURZUNDKNAPP
sparst du 10% Rabatt auf alle Webhosting-Pakete mit einer Laufzeit von 12 Monaten und mehr.

👉 Source Code auf unserer Webseite: https://coding-kurzundknapp.com

In diesem Video werden wir 3 Cards mit HTML und CSS erstellen. Es sind 3 Bilder mit Überschriften und einem ausfahrbaren Text, der beim Hovern über die Card mit einer Transition ausgefahren wird. Die Cards werden beim Hovern außerdem mit der transform: scale() Funktion vergrößert. Es ist für dieses Tutorial KEIN JavaScript benötigt. Es ist also nur mit CSS möglich (only CSS).

#css cards
#hover effect

Diese drei Bilder habe ich verwendet:
1. https://almunawwirkomplekq.com/wp-con...
2. https://www.pexels.com/de-de/foto/sch...
3. https://www.pexels.com/de-de/foto/doc...

Timestamps
00:00 Endprodukt
00:16 HTML
02:10 CSS
07:15 Hover Effekt

Lerne hier wie du einen Darkmode Button in JS programmierst:
   • Dark Mode Button mit JavaScript programmie...  

Hier zeige ich wie du eine responsive dropdown Navigationsleiste in html und css erstellst:
   • Responsive Dropdown Menü Navigation (nur m...  

Lerne hier wie die Pseudo-Elemente ::before und ::after funktionieren:    • Before und After Pseudo Elemente | CSS Tut...  

Wenn du CSS Neuling bist und erstmal die Grundlagen von CSS verstehen möchtest, dann schau hier vorbei:
   • CSS lernen für Anfänger | CSS Tutorial Deu...  

Tags für den Algorithmus ;)
css card, html css, only css, animation, hover, transition, transform translateY(), transform scale(), card hover, design, webdevelopment, website, webseite, tutorial deutsch, german