hint

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
* {
8
  box-sizing: border-box;
9
}
10

11
body {
12
  display: flex;
13
  justify-content: space-around;
14
  align-items: center;
15
  flex-wrap: wrap;
16
  gap: 40px;
17

18
  width: 100vw;
19
  height: 100vh;
20
  margin: 0;
21
  padding: 40px;
22

23
  background-color: #2c2;
24
  font-family: sans-serif;
25
}
26

27
.hint {
28
  position: relative;
29
  width: 400px;
30
  height: 400px;
31
  padding: 200px;
32
  margin: auto;
33
  border-radius: 50%;
34

35
  background-color: rgba(255,255,255,.1);
36
  transition: padding .5s ease-in-out;
37

38
  &.first {
39
    .hint__inner {
40
      background: center/cover no-repeat url(nth($links, 1));
41
    }
42

43
    &::before {
44
      content: 'IMAGE 1'
45
    }
46
  }
47
  &.second {
48
    .hint__inner {
49
      background: center/cover no-repeat url(nth($links, 2));
50
    }
51

52
    &::before {
53
      content: 'IMAGE 2'
54
    }
55
  }
56
  &.third {
57
    .hint__inner {
58
      background: center/cover no-repeat url(nth($links, 3));
59
    }
60

61
    &::before {
62
      content: 'IMAGE 2'
63
    }
64
  }
65

66
  &::before {
67
    content: '';
68
    position: absolute;
69
    left: 0;
70
    right: 0;
71
    top: 0;
72
    line-height: 400px;
73
    text-align: center;
74
    z-index: -1;
75
  }
76
  &__close {
77
    cursor: pointer;
78
    position: absolute;
79
    top: 30%;
80
    left: 30%;
81
    display: grid;
82
    place-content: center;
83
    background: #000;
84
    color: #fff;
85
    border: none;
86
    border-radius: 50%;
87
    width: 40px;
88
    height: 40px;
89
    font-size: 30px;
90
    transform: scale(0) rotate(360deg);
91
    transition:
92
      left .5s cubic-bezier(.34, 1.56, .64, 1),
93
      top .5s cubic-bezier(.34, 1.56, .64, 1),
94
      transform .5s;
95

96
    box-shadow: 0 .15em .25em rgba(0, 0, 0, .3);
97
  }
98
  &__inner {
99
    width: 100%;
100
    height: 100%;
101
    overflow: hidden;
102
    border-radius: 50%;
103
    border: 0 solid white;
104
    box-shadow: 0 .25em 1em rgba(0, 0, 0, .3);
105
    background-color: #bbb;
106
    transition:
107
      padding .5s ease-in-out,
108
      border-width .25s;
109

110
    img {
111
      position: relative;
112
      width: 100%;
113
      transition:
114
        transform .5s .2s cubic-bezier(.25, 1, .5, 1),
115
        top .5s .2s cubic-bezier(.25, 1, .5, 1);
116
    }
117
  }
118
  &:hover {
119
    padding: 0;
120

121
    .hint__inner {
122
      border-width: .5em;
123
    }
124
    .hint__close {
125
      top: 11%;
126
      left: 11%;
127
      transform: scale(1);
128
    }
129
  }
130
  
131
  &__show {
132
    padding: 0;
133

134
    .hint__inner {
135
      border-width: .5em;
136
    }
137
    .hint__close {
138
      top: 11%;
139
      left: 11%;
140
      transform: scale(1);
141
    }
142
  }
143
}
144

145
@media (max-width: 920px) {
146
  .hint {
147
    width: 300px;
148
    height: 300px;
149
    padding: 150px;
150

151
    &::before {
152
      content: '';
153
      line-height: 300px;
154
    }
155
  }
156
}
157