Card by eslam-hany

1.card {
2  position: relative;
3  width: 220px;
4  height: 320px;
5  background: mediumturquoise;
6  display: flex;
7  align-items: center;
8  justify-content: center;
9  font-size: 25px;
10  font-weight: bold;
11  border-radius: 15px;
12  cursor: pointer;
13}
14
15.card::before,
16.card::after {
17  position: absolute;
18  content: "";
19  width: 20%;
20  height: 20%;
21  display: flex;
22  align-items: center;
23  justify-content: center;
24  font-size: 25px;
25  font-weight: bold;
26  background-color: lightblue;
27  transition: all 0.5s;
28}
29
30.card::before {
31  top: 0;
32  right: 0;
33  border-radius: 0 15px 0 100%;
34}
35
36.card::after {
37  bottom: 0;
38  left: 0;
39  border-radius: 0 100%  0 15px;
40}
41
42.card:hover::before,
43.card:hover:after {
44  width: 100%;
45  height: 100%;
46  border-radius: 15px;
47  transition: all 0.5s;
48}
49
50.card:hover:after {
51  content: "HELLO";
52}