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; }

Sehr gutes Tutorial, vielen Dank!

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?

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

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

Erster lol

du redest einfach zu schnell