1.card {
2  position: relative;
3  width: 250px;
4  height: 250px;
5  color: #2e2d31;
6  background: #131313;
7  overflow: hidden;
8  border-radius: 20px;
9}
10
11.temporary_text {
12  font-weight: bold;
13  font-size: 24px;
14  padding: 6px 12px;
15  color: #f8f8f8;
16}
17
18.card_title {
19  font-weight: bold;
20}
21
22.card_content {
23  position: absolute;
24  left: 0;
25  bottom: 0;
26    /* edit the width to fit card */
27  width: 100%;
28  padding: 20px;
29  background: #f2f2f2;
30  border-top-left-radius: 20px;
31    /* edit here to change the height of the content box */
32  transform: translateY(150px);
33  transition: transform .25s;
34}
35
36.card_content::before {
37  content: '';
38  position: absolute;
39  top: -47px;
40  right: -45px;
41  width: 100px;
42  height: 100px;
43  transform: rotate(-175deg);
44  border-radius: 50%;
45  box-shadow: inset 48px 48px #f2f2f2;
46}
47
48.card_title {
49  color: #131313;
50  line-height: 15px;
51}
52
53.card_subtitle {
54  display: block;
55  font-size: 12px;
56  margin-bottom: 10px;
57}
58
59.card_description {
60  font-size: 14px;
61  opacity: 0;
62  transition: opacity .5s;
63}
64
65.card:hover .card_content {
66  transform: translateY(0);
67}
68
69.card:hover .card_description {
70  opacity: 1;
71  transition-delay: .25s;
72}
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88