Ein cooles Profilbild mit Hover Effekt in CSS

von | Apr 30, 2020 | Allgemein, Mein Youtube Kanal, Technik | 0 Kommentare

In diesem Video zeige ich euch wie man mit ein Profilbild oder ein Bild mit einem coolen Hover Effekt versehen kann. Wenn also jemand darüber fährt sieht man den Name der Person. Perfekt für Business / Team Fotos

Video / Anleitung

HTML / CSS

Hier der HTML Teil

1
2
3
4
5
6
<div class="container">
        <a href="#">
        <span>Max Mustermann</span>
        <img src="generated-photos-child.jpg">
        </a>
    </div>

Hier der CSS Teil

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
body {
        background: #262626; 
    }
 
    .container {
        width: 600px;
        margin: 5% auto;
    }
 
    .container a{
 
    position: relative;
    text-align: center;
    width: 100%;
        margin: 10px;
        display: inline-block;
        overflow: hidden;
    }
    .container a:before, .container a:after {
        top: 0;
        background: #b4151c;
        content: '';
        display: block;
        height: 100%;
        opacity: 0.5;
        position: absolute;
        width: 50%;
        z-index: 3;
    }
 
    .container a:before {
        left: 0;
    }
    .container a:after {
        right: 0;
    }
 
    .container a img {
        border: green 3px solid;
        display: block;
        z-index: 1;
    }
 
    .container a:before,
    .container a:after,
    .container a span {
        transition: all 500ms ease;
    }
 
    .container a span {
 
        color: #000;
        background-color: rgba(255,255,255,0.8);
        bottom: 15%;
        display: block;
        opacity: 0;
        padding: 10px 25px;
        position: absolute;
        text-align: center;
        text-transform: uppercase;
        width: 70%;
        z-index: 2;
        left: 8%;
        font-size: 25px;
        transform: scale(0);
        border-radius: 50px;
    }
 
    .container a:hover:before {
        left: -50%;
    }
    .container a:hover:after {
        right: -50%;
    }
 
    .container a:hover span {
        opacity: 1;
        transition: all 500ms ease;
        transform: scale(1);
    }

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht.