Card by Rodrypaladin

1.card {
2  width: 275px;
3  position: relative;
4  background: rgb(255, 255, 255);
5  padding: 20px;
6}
7
8.card::after {
9  z-index: -1;
10  content: "";
11  position: absolute;
12  width: 50%;
13  height: 10px;
14  bottom: 15px;
15  right: 0;
16  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);
17  transform: rotate(5deg);
18  transition: all 0.1s ease-in;
19}
20
21.card::before {
22  z-index: -1;
23  content: "";
24  position: absolute;
25  width: 50%;
26  height: 10px;
27  bottom: 15px;
28  left: 0;
29  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);
30  transform: rotate(-5deg);
31  transition: all 0.1s ease-in;
32}
33
34.card:hover:before, .card:hover:after {
35  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.6);
36}
37
38.card:hover:before {
39  transform: rotate(-8deg);
40}
41
42.card:hover:after {
43  transform: rotate(8deg);
44}
45
46.card__img {
47  position: relative;
48  background: #FFFFFF;
49  background: linear-gradient(315deg, #68aeff, #0032a6);
50  width: 100%;
51  height: 175px;
52}
53
54.card__span {
55  cursor: pointer;
56  font-size: 11px;
57  position: absolute;
58  background-color: white;
59  top: 10px;
60  left: 10px;
61  padding: 3px 7px;
62  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
63  transition: transform 0.1s ease-in;
64  user-select: none;
65}
66
67.card__span:hover {
68  transform: translateX(5px);
69}
70
71.card-int {
72  padding: 20px 0 0 0;
73}
74
75.card-int__title {
76  font-weight: bold;
77  font-size: 1.2rem;
78  font-family: Arial, Helvetica, sans-serif;
79  margin-bottom: 10px;
80}
81
82.card-int__button {
83  cursor: pointer;
84  margin: 20px 0 0 0;
85  padding: 7px 20px;
86  width: 100%;
87  background-color: rgb(238, 246, 255);
88  border: none;
89  color: black;
90  position: relative;
91  overflow: hidden;
92  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);
93  transition: box-shadow 0.1s ease-in;
94  user-select: none;
95}
96
97.card-int__button:active {
98  box-shadow: 0px 0px 15px rgba(0, 119, 255, 0.5);
99}
100
101.card-int__button:hover::before {
102  animation: effect_two 0.4s 1;
103}
104
105.card-int__button::before {
106  content: 'More for this article';
107  color: white;
108  display: flex;
109  align-items: center;
110  justify-content: center;
111  position: absolute;
112  background: rgb(0,133,255);
113  background: linear-gradient(146deg, #0032a6 0%, #68aeff 100%);
114  width: 100%;
115  height: 100%;
116  top: 0;
117  left: 0;
118  transform: translateX(-99%);
119  z-index: 1;
120  animation: effect_one 10s infinite;
121}
122
123.card-int__button:hover::before {
124  transform: translateX(0%);
125}
126
127.excerpt {
128  font-size: 14px;
129}
130
131@keyframes effect_one {
132  0% {
133    transform: translateX(-99%);
134  }
135
136  25% {
137    transform: translateX(-90%);
138  }
139
140  50% {
141    transform: translateX(-80%);
142  }
143
144  75% {
145    transform: translateX(-95%);
146  }
147
148  100% {
149    transform: translateX(-99%);
150  }
151}
152
153@keyframes effect_two {
154  to {
155    transform: translateX(-1%);
156  }
157
158  from {
159    transform: translateX(-99%);
160  }
161}