hint
/
style.scss
156 строк · 3.0 Кб
1$links: (
2'https://sun9-49.userapi.com/impg/WlJXmdYlZ5ObA4qdxUDDRpCpk4gPuNEbgB_s7w/WhpsC7bqr0k.jpg?size=1920x1080&quality=95&sign=ef7d5ec2d6173d3e86fa81a031333efe&type=album',
3'https://sun9-38.userapi.com/impg/RoVw9lQ-F_BR9aPw4z3SeGMTPzPGFuPuiV1omw/6iSzJoRV4jE.jpg?size=1080x1080&quality=95&sign=837d710a810ca08829794aaa70c8a5d1&type=album',
4'https://sun9-44.userapi.com/impg/1cTR6tNpRYVRzO6ny2vxmWw_RVwtEPSN-U-GtQ/PMdirb-ViSo.jpg?size=1400x1400&quality=95&sign=d21b8c74bc322ebe93d5e4c94b880f05&type=album'
5);
6
7* {
8box-sizing: border-box;
9}
10
11body {
12display: flex;
13justify-content: space-around;
14align-items: center;
15flex-wrap: wrap;
16gap: 40px;
17
18width: 100vw;
19height: 100vh;
20margin: 0;
21padding: 40px;
22
23background-color: #2c2;
24font-family: sans-serif;
25}
26
27.hint {
28position: relative;
29width: 400px;
30height: 400px;
31padding: 200px;
32margin: auto;
33border-radius: 50%;
34
35background-color: rgba(255,255,255,.1);
36transition: padding .5s ease-in-out;
37
38&.first {
39.hint__inner {
40background: center/cover no-repeat url(nth($links, 1));
41}
42
43&::before {
44content: 'IMAGE 1'
45}
46}
47&.second {
48.hint__inner {
49background: center/cover no-repeat url(nth($links, 2));
50}
51
52&::before {
53content: 'IMAGE 2'
54}
55}
56&.third {
57.hint__inner {
58background: center/cover no-repeat url(nth($links, 3));
59}
60
61&::before {
62content: 'IMAGE 2'
63}
64}
65
66&::before {
67content: '';
68position: absolute;
69left: 0;
70right: 0;
71top: 0;
72line-height: 400px;
73text-align: center;
74z-index: -1;
75}
76&__close {
77cursor: pointer;
78position: absolute;
79top: 30%;
80left: 30%;
81display: grid;
82place-content: center;
83background: #000;
84color: #fff;
85border: none;
86border-radius: 50%;
87width: 40px;
88height: 40px;
89font-size: 30px;
90transform: scale(0) rotate(360deg);
91transition:
92left .5s cubic-bezier(.34, 1.56, .64, 1),
93top .5s cubic-bezier(.34, 1.56, .64, 1),
94transform .5s;
95
96box-shadow: 0 .15em .25em rgba(0, 0, 0, .3);
97}
98&__inner {
99width: 100%;
100height: 100%;
101overflow: hidden;
102border-radius: 50%;
103border: 0 solid white;
104box-shadow: 0 .25em 1em rgba(0, 0, 0, .3);
105background-color: #bbb;
106transition:
107padding .5s ease-in-out,
108border-width .25s;
109
110img {
111position: relative;
112width: 100%;
113transition:
114transform .5s .2s cubic-bezier(.25, 1, .5, 1),
115top .5s .2s cubic-bezier(.25, 1, .5, 1);
116}
117}
118&:hover {
119padding: 0;
120
121.hint__inner {
122border-width: .5em;
123}
124.hint__close {
125top: 11%;
126left: 11%;
127transform: scale(1);
128}
129}
130
131&__show {
132padding: 0;
133
134.hint__inner {
135border-width: .5em;
136}
137.hint__close {
138top: 11%;
139left: 11%;
140transform: scale(1);
141}
142}
143}
144
145@media (max-width: 920px) {
146.hint {
147width: 300px;
148height: 300px;
149padding: 150px;
150
151&::before {
152content: '';
153line-height: 300px;
154}
155}
156}
157