Input by catraco

1.container {
2  --light: rgb(255, 255, 255);
3  --dark: rgb(50, 50, 50);
4  --br: 8px;
5}
6
7.container:hover .title {
8  opacity: 1;
9}
10
11.input {
12  background-color: transparent;
13  border: 2px solid white;
14  color: var(--light);
15  max-width: 200px;
16  padding: .5rem;
17  border-radius: var(--br);
18  outline: none;
19  opacity: .8;
20  transition: .2s ease-in-out;
21}
22
23.input:focus {
24  opacity: 1;
25}
26
27.title {
28  border-radius: var(--br);
29  transform: translate(-50%, -150%);
30  background-color: var(--light);
31  transition: .2s ease-in-out;
32  opacity: 0;
33  color: var(--dark);
34  position: absolute;
35  font-size: 15px;
36  font-weight: 600;
37  letter-spacing: 2px;
38  padding: .5rem;
39  left: 50%;
40}
41
42.title::before {
43  transform: translate(-50%, 50%) rotate(45deg);
44  background-color: var(--light);
45  position: absolute;
46  z-index: -1;
47  content: '';
48  width: 10px;
49  height: 10px;
50  bottom: 0;
51  left: 50%;
52}