Immer nur einfache Hover Effekte oder Overlay Effekte zu machen sind langweilig, manchmal muss man einfach einen anderen Effekt programmieren. Im heuten Video zeige ich euch wie man eine Flip Box macht. Also man sieht ein Bild und wenn man mit der Maus darüber fährt, dann dreht sich die Box um und zeigt den Hintergrund. Sowas kann man sehr gut für Profilseiten oder Team Webseiten verwenden. Vorderseite sieht man den Mitarbeiter und auf der Rückseite seine Kontaktdaten oder Social Media Profile.
So kleine Besonderheiten machen solche Effekte immer noch beeindruckender als sie sonst schon sind.
Video / Anleitung
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | .middle {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
.card {
cursor: pointer;
width: 340px;
height: 480px;
}
.front, .back {
width: 100%;
height: 100%;
overflow: hidden;
backface-visibility: hidden;
position: absolute;
transition: transform .6s linear;
}
.front img{
height: 100%;
}
.f {
transform: perspective(600px) rotateY(0deg);
}
.back {
background: #f1f1f1;
transform: perspective(600px) rotateY(180deg);
}
.back-content {
color: #2c3e50;
text-align: center;
width: 100%;
}
.sm {
margin: 20px 0;
}
.sm a {
display: inline-flex;
width: 40px;
height: 40px;
justify-content: center;
align-items: center;
color: #2c3e50;
transition: 0.4s;
border-radius: 50%;
}
.sm a:hover {
background: #2c3e50;
color: white;
}
.card:hover > .front {
transform: perspective(600px) rotateY(-180deg);
}
.card:hover > .back {
transform: perspective(600px) rotateY(0deg);
} |
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class="card middle">
<div class="front">
<img src="berg.jpg" alt="">
</div>
<div class="back">
<div class="back-content middle">
<h2>Eric Mächler</h2>
<span>Content Creator</span>
<div class="sm">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube-square"></i></a>
</div>
</div>
</div>
</div> |
Hallo, ich bin es nochmal. Wie kann ich hier zwei Bilder nebeneinander bekommen?
Wie kann ich 2 Bilder nebeneinander hinbekommen und wie bekomme ich die Logos da rein? Ich habe jetzt einfach die Befehle hier kopiert, aber kann die Logos nicht sehen.