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

Показать описание

Mit dem Coupon-Code: KURZUNDKNAPP
sparst du 10% Rabatt auf alle Webhosting-Pakete mit einer Laufzeit von 12 Monaten und mehr.

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:

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

Lerne hier wie du einen Darkmode Button in JS programmierst:

Hier zeige ich wie du eine responsive dropdown Navigationsleiste in html und css erstellst:

Wenn du CSS Neuling bist und erstmal die Grundlagen von CSS verstehen möchtest, dann schau hier vorbei:

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

Рекомендации по теме

Комментарии

CODE:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Cards</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="card">
<img src="images/bild1.jpg" alt="">
<div class="card_content">
<div class="content_head">
<h3>Lorem Ipsum</h3>
<h4>Lorem Ipsum dolor sit amet </h4>
</div>
<div class="content_body">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas asperiores illum similique eum quidem.</p>
</div>
</div>
</div>
<div class="card">
<img src="images/bild2.jpg" alt="">
<div class="card_content">
<div class="content_head">
<h3>Lorem Ipsum</h3>
<h4>Lorem Ipsum dolor sit </h4>
</div>
<div class="content_body">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas asperiores illum similique eum quidem.</p>
</div>
</div>
</div>
<div class="card">
<img src="images/bild3.jpg" alt="">
<div class="card_content">
<div class="content_head">
<h3>Lorem Ipsum</h3>
<h4>Lorem Ipsum dolor sit </h4>
</div>
<div class="content_body">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas asperiores illum similique eum quidem.</p>
</div>
</div>
</div>
</div>
</body>
</html>

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

coding-kurzundknapp

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

GamerToni

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?

ngglordquirmbach

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

dk

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

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

Profile Card Hover Effect mit HTML und CSS

responsive Css card hover effect 2022 || CodingWithFahim

CSS3 Glowing Gradient Glassmorphism Card Hover Effects | Glass morphism

CSS 3 Siblings Animation mithilfe von :hover und :not()

Responsive CSS Hover Animation für Cards in 2023 | Apple Style

How To Make Animated Card Design Using HTML CSS | CSS Card Hover Effects

Responsive Card Hover Effekt mit CSS (SASS) - Tutorial Deutsch - Webdesign Trends 2021

3D Cards Hover Effect HTML CSS

3D Card Hover Effect Using HTML CSS Only

How to Create CSS Card [easy]

Responsive Cards Design Pure CSS With Hover Effect

Responsive Image Cards With Hover Effect - Only Using CSS & HTML

Css responsive card hover effect for beginners | awesome card hover animation in 2021

Elementor Card Slide Down Animation On Hover CSS

CSS Card Filter Hover Effects Animation | Html CSS

Hover Effect Cards using CSS Grid | CSS Grid Tutorial | Responsive CSS Cards using HTM & CSS #cs...

Awesome CSS Card Hover Effect | CSS Hover Effect Pure HTML and CSS | CSS Tutorial

CSS 3d Flip Animation - Flip an Image when hover using CSS - Create a CSS card flip effect on hover

Modern Profile Card Hover Effect with HTML and CSS | Beginner tutorial Cards UI Design

#CSS Style an element on hovering another element

Expanding Flex Cards - How to Design Expanding Flex Cards using HTML CSS and jQuery

Learn CSS Border Animations in 6 Minutes

Visite card design html und Css -Design mit html Und Css