Card by Javierrocadev

1.card {
2  width: 250px;
3  height: 200px;
4  border-radius: 15px;
5  background: rgba(105, 13, 197, 0.103);
6  display: flex;
7  flex-direction: column;
8  position: relative;
9  overflow: hidden;
10}
11
12.card::before {
13  content: "";
14  height: 100px;
15  width: 100px;
16  position: absolute;
17  top: -40%;
18  left: -20%;
19  border-radius: 50%;
20  border: 35px solid rgba(255, 255, 255, 0.102);
21  transition: all .8s ease;
22  filter: blur(.5rem);
23}
24
25.text {
26  flex-grow: 1;
27  padding: 15px;
28  display: flex;
29  flex-direction: column;
30  color: aliceblue;
31  font-weight: 900;
32  font-size: 1.2em;
33}
34
35.subtitle {
36  font-size: .6em;
37  font-weight: 300;
38  color: rgba(240, 248, 255, 0.691);
39}
40
41.icons {
42  display: flex;
43  justify-items: center;
44  align-items: center;
45  width: 250px;
46  border-radius: 0px 0px 15px 15px;
47  overflow: hidden;
48}
49
50.btn {
51  border: none;
52  width: 84px;
53  height: 35px;
54  background-color: rgba(247, 234, 234, 0.589);
55  display: flex;
56  align-items: center;
57  justify-content: center;
58}
59
60.svg-icon {
61  width: 25px;
62  height: 25px;
63  stroke: rgb(38, 59, 126);
64}
65
66.btn:hover {
67  background-color: rgb(247, 234, 234);
68}
69
70.card:hover::before {
71  width: 140px;
72  height: 140px;
73  top: -30%;
74  left: 50%;
75  filter: blur(0rem);
76}