Card by kamehame-ha

1.cards {
2  display: flex;
3  flex-direction: column;
4  gap: 15px;
5}
6
7.cards .red {
8  background-color: #f43f5e;
9}
10
11.cards .blue {
12  background-color: #3b82f6;
13}
14
15.cards .green {
16  background-color: #22c55e;
17}
18
19.cards .card {
20  display: flex;
21  align-items: center;
22  justify-content: center;
23  flex-direction: column;
24  text-align: center;
25  height: 100px;
26  width: 250px;
27  border-radius: 10px;
28  color: white;
29  cursor: pointer;
30  transition: 400ms;
31}
32
33.cards .card p.tip {
34  font-size: 1em;
35  font-weight: 700;
36}
37
38.cards .card p.second-text {
39  font-size: .7em;
40}
41
42.cards .card:hover {
43  transform: scale(1.1, 1.1);
44}
45
46.cards:hover > .card:not(:hover) {
47  filter: blur(10px);
48  transform: scale(0.9, 0.9);
49}