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

Pubblicato il: 20 aprile 2022
sul canale di: 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


In questa pagina del sito puoi guardare il video online CSS Card Design mit hover effect Animation | HTML + CSS Tutorial Deutsch della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Coding - kurz und knapp 20 aprile 2022, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 4,302 volte e gli è piaciuto 148 spettatori. Buona visione!