1.card {
2  position: relative;
3  background: #a68b8a;
4  width: 190px;
5  height: 265px;
6  cursor: pointer;
7  transition: all .3 ease;
8  overflow: visible;
9  box-shadow: 0px 1px 5px rgba(0, 0, 0, .3);
10}
11
12.product {
13  content: "";
14  position: absolute;
15  top: 10%;
16  left: 50%;
17  transform: translate(-50%, 0);
18  width: 150px;
19  height: 150px;
20  background-color: #faf3e8;
21  z-index: 1;
22}
23
24.product p {
25  font-size: 17px;
26  text-align: center;
27  color: #181818;
28  line-height: 150px;
29}
30
31.shine {
32  position: relative;
33  top: 0;
34  left: 0;
35  width: 190px;
36  height: 265px;
37  overflow: hidden;
38}
39
40.shine-effect {
41  position: absolute;
42  top: -15%;
43  left: 150%;
44  width: 25px;
45  height: 400px;
46  background-color: #ffffff2a;
47  box-shadow: 0 0 15px 2px #ffffff42;
48  transform: rotate(25deg);
49  transition: all 1s cubic-bezier(0.78, 0.02, 0.5, 0.77);
50  z-index: 5;
51}
52
53.pattern-1 {
54  position: absolute;
55  top: 0;
56  left: 0;
57  width: 125px;
58  height: auto;
59  z-index: 2;
60}
61
62.pattern-2 {
63  position: absolute;
64  top: -10%;
65  left: -10%;
66  width: 200px;
67  height: auto;
68  z-index: 2;
69}
70
71.tree {
72  position: absolute;
73  bottom: 1%;
74  right: -2%;
75  width: 100px;
76  height: auto;
77  transform-origin: 100% 0;
78  transform: rotate(-15deg);
79  z-index: 3;
80}
81
82.tape-1 {
83  position: absolute;
84  top: -20%;
85  left: 2%;
86  width: 35px;
87  height: auto;
88  filter: drop-shadow(1px 3px 3px #18181870);
89  z-index: 6;
90}
91
92.tape-2 {
93  position: absolute;
94  top: -25%;
95  right: 2%;
96  width: 35px;
97  height: auto;
98  filter: drop-shadow(1px 3px 3px #18181870);
99  z-index: 6;
100}
101
102.card:hover {
103  transform: scale(1.02);
104}
105
106.card:hover .tape-1 {
107  transform: scale(1);
108}
109
110.card:hover .tape-2 {
111  transform: scale(1);
112}
113
114.card:hover .shine-effect {
115  left: -100%;
116}
117
118.card:active {
119  transform: scale(1.02) translate(0, 5%);
120}
121
122.card:active .tape-1 {
123  transform-origin: 0 100%;
124  transform: scaleY(1.1);
125}
126
127.card:active .tape-2 {
128  transform-origin: 0 100%;
129  transform: scaleY(1.1);
130}
131
132.fil-tape-10 {
133  fill: #A99473
134}
135
136.fil-tape-11 {
137  fill: #BBAA88;
138  fill-rule: nonzero
139}
140
141.fil-tape-20 {
142  fill: #A99473
143}
144
145.fil-tape-21 {
146  fill: #BBAA88;
147  fill-rule: nonzero
148}
149
150.fil-pattern-1 {
151  fill: #f3dfde
152}
153
154.fil-pattern-2 {
155  fill: #333333;
156  fill-rule: nonzero
157}
158
159.fil0 {
160  fill: #333333
161}