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

Veröffentlicht am: 20 April 2022
auf dem Kanal: Coding - kurz und knapp

4,302

148

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 progr...

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

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

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 Tutoria...

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

Auf dieser Seite können Sie das Online-Video CSS Card Design mit hover effect Animation | HTML + CSS Tutorial Deutsch mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Coding - kurz und knapp 20 April 2022 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 4,302 Mal angesehen und es wurde von 148 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

889