Beautiful card in html css

Product cards are famous part of eccomerce websites. We are creating two cards with different styles. At the end you will be able, how to create beautiful cards in html and CSS. Code of cards are given below given below:

First Card html

1 <div className="product_card1">
2 <div className="product_img1">
3   <img src={productImg} alt="product img" />
4   <ul>
5     <li>{cartIcon}</li>
6     <li>{heartIcon}</li>
7     <li>{plus}</li>
8     <li>{fullScreen}</li>
9   </ul>
10 </div>
11 <div className="product_detail1">
12   <p>Here Product Title</p>
13   <p className="price1">
14     <span className="old_price1">$30</span>
15     <span>$20</span>
16   </p>
17 </div>
18</div>

First Card CSS

1/*==================== First Card ===============*/
2.product_card1 {
3  position: relative;
4  width: 300px;
5  margin-left: auto;
6  margin-right: auto;
7  border-radius: 10px;
8  text-align: left;
9  overflow: hidden;
10  background: linear-gradient(
11    0deg,
12    rgba(34, 193, 195, 1) 0%,
13    rgba(208, 197, 173, 1) 100%
14  );
15  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
16}
17.product_img1 {
18  position: relative;
19  width: 300px;
20  height: 300px;
21  left: 50%;
22  transform: translateX(-50%);
23  overflow: hidden;
24}
25.product_card1 .product_img1 img {
26  position: absolute;
27  background: no-repeat;
28  background-size: cover;
29  width: 100%;
30  height: 100%;
31  top: 0;
32  left: 0;
33  transition: all 0.5s;
34}
35.product_card1 .product_img1 ul {
36  position: absolute;
37  width: 100%;
38  display: flex;
39  justify-content: space-around;
40  padding: 0;
41  opacity: 0;
42  bottom: -40px;
43  transition: all 0.5s;
44}
45.product_card1:hover .product_img1 img {
46  top: -20px;
47  left: -10px;
48  transform: scale(1.1, 1.3) rotate(-6deg);
49  transition: all 0.5s;
50}
51.product_card1:hover .product_img1 ul {
52  bottom: 20px;
53  opacity: 1;
54  transition: all 0.5s;
55}
56.product_img1 ul li {
57  list-style: none;
58  padding: 13px;
59  background: rgb(208, 197, 173);
60  background: linear-gradient(
61    0deg,
62    rgba(208, 197, 173, 1) 0%,
63    rgba(34, 193, 195, 1) 100%
64  );
65  display: flex;
66  align-items: center;
67  justify-content: center;
68  border-radius: 5px;
69  transition: all 0.3s ease-in-out;
70}
71.product_img1 ul li:hover {
72  cursor: pointer;
73  color: white;
74  transform: scale(1.3, 1.3);
75  transition: all 0.3s ease-in-out;
76}
77.product_detail1 {
78  position: absolute;
79  padding: 0px 15px 0px 15px;
80  bottom: 0;
81}
82
83.product_detail1 .price1 .old_price1 {
84  padding: 0px 10px 0px 0px;
85  opacity: 0.6;
86  text-decoration: line-through;
87}

Second Card Html

1<div className="product_card2">
2 <div className="product_img2">
3   <img src={productImg} alt="product img" />
4   <ul>
5     <li>{cartIcon}</li>
6     <li>{heartIcon}</li>
7     <li>{plus}</li>
8     <li>{fullScreen}</li>
9   </ul>
10 </div>
11 <div className="product_detail2">
12   <p>Here Product Title</p>
13   <p className="price2">$20</p>
14 </div>
15</div>

Second Card CSS

1/*==================== Second Card ===============*/
2.product_card2 {
3  width: 300px;
4  margin-left: auto;
5  margin-right: auto;
6  border-radius: 10px;
7  text-align: left;
8  overflow: hidden;
9  background: linear-gradient(
10    0deg,
11    rgba(34, 193, 195, 1) 0%,
12    rgba(208, 197, 173, 1) 100%
13  );
14  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
15}
16.product_img2 {
17  position: relative;
18  width: 300px;
19  height: 300px;
20  left: 50%;
21  transform: translateX(-50%);
22  overflow: hidden;
23}
24.product_card2 .product_img2 img {
25  position: absolute;
26  background: no-repeat;
27  background-size: cover;
28  width: 100%;
29  height: 100%;
30  top: 0;
31  left: 0;
32  transition: all 0.5s;
33}
34.product_card2 .product_img2 ul {
35  position: absolute;
36  width: 100%;
37  height: 70%;
38  top: 50%;
39  left: -60px;
40  opacity: 0;
41  transform: translateY(-50%);
42  display: flex;
43  flex-direction: column;
44  justify-content: space-around;
45  padding: 0;
46
47  transition: all 0.5s;
48}
49.product_card2:hover .product_img2 img {
50  top: -20px;
51  left: -10px;
52  transform: scale(1.1, 1.3) rotate(-6deg);
53  transition: all 0.5s;
54}
55.product_card2:hover .product_img2 ul {
56  left: 5px;
57  opacity: 1;
58  opacity: 1;
59  display: flex;
60  flex-direction: column;
61  justify-content: space-around;
62  transition: all 0.5s;
63}
64.product_img2 ul li {
65  list-style: none;
66  padding: 13px;
67  background: rgb(208, 197, 173);
68  background: linear-gradient(
69    0deg,
70    rgba(208, 197, 173, 1) 0%,
71    rgba(34, 193, 195, 1) 100%
72  );
73  display: flex;
74  align-items: center;
75  justify-content: center;
76  width: 20px;
77  border-radius: 5px;
78  transition: all 0.3s ease-in-out;
79}
80.product_img2 ul li:hover {
81  cursor: pointer;
82  color: white;
83  transform: scale(1.3, 1.3);
84  transition: all 0.3s ease-in-out;
85}
86
87.product_detail2 {
88  position: relative;
89  padding: 0px 15px 0px 15px;
90}
91

Here is the link of live example which we done so far:
Click here