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
#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