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>