Card by Gaurav-WebDev

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 transform, 400ms box-shadow, 400ms background-color;
31  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
32}
33
34.cards .card p.tip {
35  font-size: 1em;
36  font-weight: 700;
37}
38
39.cards .card p.second-text {
40  font-size: 0.7em;
41}
42
43.cards .card:hover {
44  transform: scale(1.1);
45  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
46  background-color: rgba(255, 255, 255, 0.1);
47  color: #333;
48}
49
50.cards:hover > .card:not(:hover) {
51  filter: blur(10px);
52  transform: scale(0.9);
53  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
54}
55