1.card {
2 width: 190px;
3 height: 254px;
4 border-radius: 1em;
5 padding: 1.9rem;
6 background: #f5f5f5;
7 position: relative;
8 display: flex;
9 align-items: flex-end;
10 transition: 0.4s ease-out;
11 box-shadow: 0px 7px 20px rgba(43, 8, 37, 0.2);
12}
13
14.card:before {
15 content: "";
16 position: absolute;
17 top: 0;
18 left: 0;
19 display: block;
20 width: 100%;
21 height: 100%;
22 background: rgba(238, 116, 116, 0.4);
23 z-index: 2;
24 transition: 0.5s;
25}
26
27.card-info {
28 position: relative;
29 z-index: 3;
30 color: #f5f5f5;
31 opacity: 0;
32 transform: translateY(20%);
33 transition: 0.5s;
34}
35
36/*Text*/
37.text-title {
38 font-size: 1.5rem;
39 font-weight: 500;
40}
41
42.text-body {
43 letter-spacing: 1px;
44 font-size: 0.9rem;
45 margin: 5px 0 15px 0;
46}
47
48/*Button*/
49.card-button {
50 padding: 0.6rem;
51 outline: none;
52 border: none;
53 border-radius: 4px;
54 background: #ee9ca7;
55 color: white;
56 font-weight: bold;
57 transition: 0.4s ease;
58}
59
60/*Image*/
61.card-img {
62 width: 100%;
63 height: 100%;
64 position: absolute;
65 top: 0;
66 left: 0;
67 background: #ee9ca7;
68 background: linear-gradient(to bottom, #e7aeae, #ee9ca7);
69}
70
71/*Hover*/
72.card:hover {
73 transform: translateY(5%);
74}
75
76.card:hover:before {
77 opacity: 1;
78}
79
80.card:hover .card-info {
81 opacity: 1;
82 transform: translateY(0);
83}
84
85.card-button:hover {
86 background: rgba(218, 77, 77, 0.4);
87 color: #f5f5f5;
88}