Heute zeige ich euch wie ihr diesen coolen Card Hover Effekt für eure Webseite machen könnt. Manchmal sind kleine Animationen einfach einen Eye-Catcher und fangen die Aufmerksamkeit der Webseiten Besucher.
Video
HTML
<div class="container">
<div class="card">
<div class="box front">
<div class="content">
<img src="img/brush.png" />
<h3>Pinsel</h3>
</div>
</div>
<div class="box rueckseite">
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
tempora corrupti facilis animi ex eaque recusandae cumque commodi
molestias ducimus.
</p>
<a href="#">Weiter</a>
</div>
</div>
</div>
<div class="card">
<div class="box front">
<div class="content">
<img src="img/bitcoin.png" />
<h3>Bezahlen</h3>
</div>
</div>
<div class="box rueckseite">
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
tempora corrupti facilis animi ex eaque recusandae cumque commodi
molestias ducimus.
</p>
<a href="#">Weiter</a>
</div>
</div>
</div>
<div class="card">
<div class="box front">
<div class="content">
<img src="img/truck.png" />
<h3>Lieferung</h3>
</div>
</div>
<div class="box rueckseite">
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
tempora corrupti facilis animi ex eaque recusandae cumque commodi
molestias ducimus.
</p>
<a href="#">Weiter</a>
</div>
</div>
</div>
</div>CSS
:root {
--normalFarbe: #333;
--hell: #fff;
--fokusFarbe: #ff6347;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: var(--normalFarbe);
}
.container {
width: 1000px;
position: relative;
display: flex;
justify-content: space-between;
}
.container .card {
position: relative;
}
.container .card .box {
width: 300px;
height: 200px;
transition: 500ms;
}
.container .card .box.front {
position: relative;
background: var(--normalFarbe);
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
transform: translateY(100px);
}
.container .card:hover .box.front {
/* card 100 runter rauf */
transform: translateY(0);
background: var(--fokusFarbe);
}
.container .card .box.front .content {
opacity: 0.5;
transition: 200ms;
}
.container .card:hover .box.front .content {
opacity: 1;
}
.container .card .box.front .content img {
width: 150px;
}
.container .card .box.front .content h3 {
color: #fff;
padding: 0;
margin: 10px 0 0;
text-align: center;
font-size: 1.5rem;
}
.container .card .box.rueckseite {
position: relative;
background: var(--hell);
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
transform: translateY(-100px);
}
.container .card:hover .box.rueckseite {
/*card runter rauf */
transform: translateY(0);
}
.container .card .box.rueckseite .content p {
margin: 0;
padding: 0;
}
.container .card .box.rueckseite .content a {
margin: 15px 0 0;
display: inline-block;
text-decoration: none;
font-weight: 900;
color: var(--normalFarbe);
padding: 5px;
border: 1px solid var(--normalFarbe);
}
.container .card .box.rueckseite .content a:hover {
background: var(--normalFarbe);
color: var(--hell);
}
Hallo, ich bin 74 Jahre und komme aus Trier. Ich bastle sei einiger Zeit mit HTML rum. Durch Ihre Videos habe ich bei meinem Anfangswissen viele Anregungen in HTML und CSS gesehen und schnell und viel dazu gelernt. Sie sind sehr interessant, schön und gut zu verstehen. Ich habe auch schon einiges nachgemacht und es funktioniert. Ich habe auch Werte in Größen, Farbe und Gestaltung geändert um zu sehen wie was funktioniert. Vielen Dank