Card by Javierrocadev

1.card {
2  width: 164px;
3  height: 276px;
4  background: rgb(0, 0, 0);
5  border: 3px solid rgb(17, 4, 94);
6  border-radius: 15px;
7  position: relative;
8  padding: 5px;
9  display: flex;
10  flex-direction: column;
11  gap: 22px;
12  transition: all 1s ease;
13  color: antiquewhite;
14}
15
16.card::before {
17  content: "";
18  width: 10px;
19  height: 10px;
20  position: absolute;
21  bottom: 10px;
22  right: 77px;
23  border-radius: 50%;
24  background-color: rgb(17, 4, 94);
25}
26
27.card__date {
28  display: flex;
29  flex-direction: column;
30  margin-top: 30px;
31}
32
33.time {
34  font-size: 2em;
35}
36
37.popup {
38  background-color: #444746;
39  border-radius: 5px;
40  display: flex;
41  flex-direction: column;
42  font-size: .8em;
43  padding: 3px;
44}
45
46.popup .title {
47  font-size: 9px;
48  color: #9cbde2;
49}
50
51.card__date , .popup {
52  opacity: 0;
53  transition: all .5s ease;
54}
55
56.card:hover {
57  transform: rotate3d(5, 5, 10, -45deg);
58  box-shadow: -40px 0px 5px 10px #289FED, -80px 0px 10px 20px #9dd2f5, -120px 0px 20px 40px #374650;
59  ;
60}
61
62.card:hover .card__date , .card:hover .popup {
63  opacity: 1;
64}