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

[@coding-kurzundknapp]

CODE:



Animated Cards






Lorem Ipsum
Lorem Ipsum dolor sit amet


Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas asperiores illum similique eum quidem.







Lorem Ipsum
Lorem Ipsum dolor sit


Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas asperiores illum similique eum quidem.







Lorem Ipsum
Lorem Ipsum dolor sit


Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas asperiores illum similique eum quidem.




*************************************
@import url('fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;1,600&display=swap');
*{
margin: 0;
padding: 0;
color: white;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
background: #181C24;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 30px;
}
.card{
height: 500px;
width: 350px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition: 250ms ease-in-out;
}
.card img{
height: 100%;
}
.card_content{
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
width: calc(100% - 40px);
font-size: 20px;
display: flex;
flex-direction: column;
gap: 20px;
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.203) 25%);
transform: translateY(calc(100% - 108px));
transition: 250ms ease-in-out;
}
.card:hover .card_content{
transform: translateY(0);
}
.card:hover{
transform: scale(1.1);
}
h3{
font-size: 32px;
font-weight: 600;
}
h4{
font-style: italic;
}
.content_head{
position: relative;
}
.content_head::after{
content: '';
height: 4px;
width: 50%;
background-color: #ff0033;
position: absolute;
bottom: -15px;
}

[@leythecg]

Sehr gutes Tutorial, vielen Dank!

[@ngglordquirmbach2404]

Moin. Bin grade dabei eine website für mein Unternehmen einzurichten. Habe keine Ahnung von html und css. Habe mich jetzt etwas reingearbeitet und mit deinem Video zur Navigationsleite meine eigene erstellt. Wollte jetzt das hier auch einfügen. Weiß nur nicht ob ich den css Teil wieder alleine stehend schreiben muss oder in dem alten von der navigationsleiste?

[@coding-kurzundknapp]

Grundsätzlich ist es kein Problem, wenn du alles in eine CSS-Datei schreibst. Es empfiehlt sich jedoch für sich wiederholende Webseiten-Elemente (wie z.B. deine Navigationsleiste) eigene CSS-Dateien zu schreiben. Die Navigationsleiste erscheint nämlich vermutlich auf all deinen HTML-Seiten. Daher ist es sinnvoll eine navigation.css- Datei zu erstellen in der dein CSS-Code für die Navigationsleiste steht. Diese Datei bindest du dann überall ein, wo sie gebraucht wird. Den Code für die Cards kannst du einfach in deine Haupt-CSS-Datei schreiben.

[@MC_FortunaCraft]

Bitte Antworten!
Hi danke für das Video eine Frage wenn ich die Webseite zum Handy Format wechsle wird nur 1 Bild angezeigt 1bild fehlt komplett und 1 Bild ist rechts neben dem ersten aber wegen dem Format nicht zu sehen kannst du da irgendwie helfen

[@dk790]

Hi
Wollte fragen ob du mir bitte deinen Code schicken könntest. Ich habs ausprobiert und bei mir funktioniert irgendwie nicht, wäre nett sodass ich vergleichen könnte

[@coding-kurzundknapp]

Der Code ist jetzt als Kommentar angepinnt.

[@dk790]

@@coding-kurzundknapp danke, hast nen neuen Abonnent bekommen

[@Saseme]

Erster lol

[@Hl._Br._Steffen]

du redest einfach zu schnell