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

Publié le: 20 avril 2022
sur la chaîne: 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


Sur cette page du site, vous pouvez voir la vidéo en ligne CSS Card Design mit hover effect Animation | HTML + CSS Tutorial Deutsch durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur Coding - kurz und knapp 20 avril 2022, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 4,302 fois et il a aimé 148 téléspectateurs. Bon visionnage!