CSS100Day(13)-图片hover上方出现蒙层和元素

1
<div class="frame">
2
    <div id="profile-1" class="profile">
3
        <img src="https://100dayscss.com/codepen/13-1.jpg" alt="" />
4
        <div class="overlay"></div>
5
        <div class="plus"></div>
6
    </div>
7
    <div id="profile-2" class="profile">
8
        <img src="https://100dayscss.com/codepen/13-2.jpg" alt="" />
9
        <div class="overlay"></div>
10
        <div class="plus"></div>
11
    </div>
12
    <div id="profile-3" class="profile">
13
        <img src="https://100dayscss.com/codepen/13-3.jpg" alt="" />
14
        <div class="overlay"></div>
15
        <div class="plus"></div>
16
    </div>
17
    <div id="profile-4" class="profile">
18
        <img src="https://100dayscss.com/codepen/13-4.jpg" alt="" />
19
        <div class="overlay"></div>
20
        <div class="plus"></div>
21
    </div>
22
    <div id="detail-1" class="detail">
23
        <div class="close"></div>
24
        <img class="header" src="https://100dayscss.com/codepen/13-1-header.jpg" alt="" />
25
        <div class="image">
26
            <img src="https://100dayscss.com/codepen/13-1.jpg" alt="" />
27
        </div>
28
        <div class="infos">
29
            <div class="name">邓岳林</div>
30
        </div>
31
    </div>
32
</div>
33
<script>
34
    const profile = document.querySelectorAll(".profile")
35
    const detail = document.querySelector(".detail")
36
    const closeEle = document.querySelector(".close")
37
    profile.forEach((n) => {
38
        n.addEventListener("click", () => {
39
            detail.classList.add("active")
40
        })
41
    })
42
    closeEle.addEventListener("click", () => {
43
        detail.classList.remove("active")
44
    })
45
</script>

1
:root {
2
    --red-color: #ec6565;
3
}
4

5
.frame {
6
    position: relative;
7
    width: 400px;
8
    height: 400px;
9
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
10
    background: #fff;
11
    color: #fff;
12
    display: grid;
13
    grid-template-columns: 1fr 1fr;
14
    grid-template-rows: 1fr 1fr;
15
}
16

17
.profile {
18
    position: relative;
19
    display: grid;
20
    place-content: center;
21
    cursor: pointer;
22
    z-index: 0;
23

24
    img {
25
        width: 100%;
26
        height: 100%;
27
    }
28

29
    .overlay {
30
        position: absolute;
31
        inset: 2px;
32
        background: #000;
33
        opacity: 0;
34
        transition: all 0.6s ease-in-out;
35
    }
36

37
    .plus {
38
        position: absolute;
39
        inset: 0;
40
        margin: auto;
41
        border-radius: 50%;
42
        width: 50px;
43
        height: 50px;
44
        background: var(--red-color);
45
        box-shadow: 2px 4px 10px 0 rgba(0, 0, 0, 0.5);
46
        transition: all 0.4s ease-in-out;
47
        opacity: 0;
48
        transform: scale(2);
49
        pointer-events: none;
50

51
        &::before {
52
            display: block;
53
            content: "";
54
            width: 14px;
55
            height: 2px;
56
            background: #fff;
57
            position: absolute;
58
            inset: 0;
59
            margin: auto;
60
        }
61

62
        &::after {
63
            display: block;
64
            content: "";
65
            width: 2px;
66
            height: 14px;
67
            background: #fff;
68
            position: absolute;
69
            inset: 0;
70
            margin: auto;
71
        }
72
    }
73

74
    &:hover {
75
        .overlay {
76
            opacity: 0.4;
77
        }
78
        .plus {
79
            opacity: 1;
80
            transform: scale(1);
81
        }
82
    }
83
}
84

85
.detail {
86
    display: block;
87
    position: absolute;
88
    inset: 0;
89
    overflow: hidden;
90
    pointer-events: none;
91
    font-size: 0;
92
    z-index: 2;
93

94
    .header {
95
        transform: translateY(-105%);
96
        transition: all 0.6s ease-in 0.4s;
97
        height: 200px;
98
        z-index: 2;
99

100
        img {
101
            width: 100%;
102
            height: 100%;
103
        }
104
    }
105

106
    .image {
107
        box-sizing: border-box;
108
        position: absolute;
109
        z-index: 3;
110
        top: 150px;
111
        left: 150px;
112
        width: 100px;
113
        height: 100px;
114
        border: 2px solid #fff;
115
        border-radius: 50%;
116
        overflow: hidden;
117
        box-shadow: 4px 6px 15px 0 rgba(0, 0, 0, 0.2);
118
        transform: translate3d(0, -250px, 0);
119
        transition: all 0.6s ease-in 0.4s;
120

121
        img {
122
            width: 100%;
123
            height: auto;
124
        }
125
    }
126

127
    .close {
128
        z-index: 2;
129
        width: 50px;
130
        height: 50px;
131
        background: var(--red-color);
132
        position: absolute;
133
        right: 10px;
134
        top: 10px;
135
        border-radius: 50%;
136
        cursor: pointer;
137
        transform: translateY(-130%) rotate(45deg);
138
        transition:
139
            background 0.3s ease-in-out,
140
            transform 0.5s ease-in;
141

142
        &:before {
143
            position: absolute;
144
            content: "";
145
            width: 14px;
146
            height: 2px;
147
            top: 24px;
148
            left: 18px;
149
            background: #fff;
150
            transition: all 0.3s ease-in-out;
151
        }
152

153
        &:after {
154
            position: absolute;
155
            content: "";
156
            width: 2px;
157
            height: 14px;
158
            top: 18px;
159
            left: 24px;
160
            background: #fff;
161
            transition: all 0.3s ease-in-out;
162
        }
163

164
        &:hover {
165
            background: #fff;
166
            &::after,
167
            &::before {
168
                background: var(--red-color);
169
            }
170
        }
171
    }
172

173
    .infos {
174
        box-sizing: border-box;
175
        background: var(--red-color);
176
        height: 220px;
177
        padding-top: 67px;
178
        transform: translate3d(0, 130%, 0);
179
        transition: all 0.6s ease-in 0.4s;
180
    }
181

182
    .name {
183
        font-size: 16px;
184
        font-weight: 600;
185
        text-align: center;
186
    }
187

188
    &.active {
189
        pointer-events: all;
190

191
        .header {
192
            transform: translateY(0);
193
            transition: all 0.6s ease-in 0.2s;
194
        }
195

196
        .image {
197
            transform: translate3d(0, 0, 0);
198
            transition: all 0.6s ease-in 0.4s;
199
        }
200

201
        .close {
202
            transform: translateY(0) rotate(45deg);
203
            transition: transform 0.6s ease-in 0.8s;
204
        }
205

206
        .infos {
207
            transform: translate3d(0, 0, 0);
208
            transition: all 0.6s ease-out 0.2s;
209
        }
210
    }
211
}