1.card {
2  position: relative;
3  top: 2em;
4  width: 12.5em;
5  height: 7.5em;
6  background: white;
7  transition: .4s ease-in-out;
8  border-radius: 15px;
9  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
10  overflow: hidden;
11}
12
13.heading {
14  position: relative;
15  color: black;
16  font-weight: bold;
17  font-size: 1.1em;
18  padding-top: 1em;
19  padding-left: 1em;
20  transition: .4s ease-in-out;
21}
22
23.details {
24  position: relative;
25  color: black;
26  font-size: 0.6em;
27  padding-top: 1.5em;
28  padding-left: 2em;
29  transition: .4s ease-in-out;
30}
31
32.price {
33  position: relative;
34  color: black;
35  font-weight: bold;
36  font-size: 0.8em;
37  padding-top: 1.5em;
38  padding-left: 1.5em;
39  top: 9.6em;
40  left: 5em;
41  transition: .4s ease-in-out;
42}
43
44.btn1 {
45  position: relative;
46  border: none;
47  outline: none;
48  background-color: black;
49  color: white;
50  font-size: 0.6em;
51  padding-left: 6.9em;
52  padding-right: 6.9em;
53  padding-top: 0.8em;
54  padding-bottom: 0.85em;
55  border-radius: 10px;
56  left: 2.6em;
57  top: 14.8em;
58  transition: .4s ease-in-out;
59  font-weight: bold;
60}
61
62.btn1:hover {
63  background-color: limegreen;
64  cursor: pointer;
65}
66
67.btn2 {
68  position: relative;
69  border: none;
70  outline: none;
71  background-color: black;
72  color: white;
73  font-size: 0.6em;
74  padding-left: 5.1em;
75  padding-right: 5.1em;
76  padding-top: 0.8em;
77  padding-bottom: 0.85em;
78  border-radius: 10px;
79  left: 2.6em;
80  top: 15.5em;
81  transition: .4s ease-in-out;
82  font-weight: bold;
83}
84
85.btn2:hover {
86  background-color: limegreen;
87  cursor: pointer;
88}
89
90.glasses {
91  position: relative;
92  top: -4em;
93  left: 9.5em;
94  width: 70px;
95  height: 70px;
96  transition: .4s ease-in-out;
97}
98
99.card:hover {
100  width: 12.5em;
101  height: 23em;
102  transform: translateY(1.25em);
103}
104
105.card:hover + .glasses {
106  transform: rotateX(360deg);
107  height: 100px;
108  width: 100px;
109  left: 3em;
110  top: -18em;
111}
112
113.card:hover .heading {
114  transform: translateY(7em) translateX(2.3em);
115}
116
117.card:hover .details {
118  transform: translateY(13em) translateX(3.5em);
119}