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



Published
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-content/uploads/2020/08/pexels-jeff-nissen-931911.jpg
2. https://www.pexels.com/de-de/foto/schattenbild-des-baumes-nahe-dem-gewasser-wahrend-der-goldenen-stunde-36717/
3. https://www.pexels.com/de-de/foto/dock-unter-bewolktem-himmel-vor-dem-berg-206359/

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

Lerne hier wie du einen Darkmode Button in JS programmierst:
https://youtu.be/eT_MVOqH5bQ

Hier zeige ich wie du eine responsive dropdown Navigationsleiste in html und css erstellst:
https://youtu.be/QrTG4iu8cUk

Lerne hier wie die Pseudo-Elemente ::before und ::after funktionieren: https://youtu.be/-bXE9_dJKwA

Wenn du CSS Neuling bist und erstmal die Grundlagen von CSS verstehen möchtest, dann schau hier vorbei:
https://youtu.be/lXYGHPWgRJg

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
Category
Web design
Be the first to comment