1.card {
2  position: relative;
3  width: 300px;
4  height: 400px;
5  margin: 20px;
6  border-radius: 10px;
7  overflow: hidden;
8  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
9  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
10}
11
12.card__image {
13  position: absolute;
14  top: 0;
15  left: 0;
16  width: 100%;
17  height: 100%;
18  overflow: hidden;
19  border-radius: 10px;
20}
21
22.card__image img {
23  width: 100%;
24  height: 100%;
25  object-fit: cover;
26  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
27}
28
29.card__content {
30  position: absolute;
31  bottom: 0;
32  left: 0;
33  width: 100%;
34  padding: 20px;
35  background-color: #fff;
36  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
37}
38
39.card__title {
40  font-size: 24px;
41  font-weight: bold;
42  margin-bottom: 10px;
43}
44
45.card__text {
46  font-size: 16px;
47  line-height: 1.5;
48  margin-bottom: 20px;
49}
50
51.card__button {
52  display: inline-block;
53  padding: 10px 20px;
54  background-color: #000;
55  color: #fff;
56  text-decoration: none;
57  border-radius: 5px;
58}
59
60.card:hover {
61  transform: translateY(-10px);
62}
63
64.card:hover .card__image img {
65  transform: scale(1.2);
66}
67
68.card:hover .card__content {
69  transform: translateY(-100%);
70}
71
72.card__image {
73  height: 400px;
74  width: 300px;
75  background-color: #000;
76  /* you can put img url here  */
77}