1.card {
2  position: relative;
3  width: 190px;
4  height: 254px;
5  background: #fff;
6  border: solid 4px #333;
7  box-shadow: -5px 5px #333;
8  transition: all .2s ease-in-out;
9  display: flex;
10  justify-content: center;
11  cursor: pointer;
12}
13
14.card:hover {
15  margin: 10px 10px 0 0;
16  box-shadow: 0px 0px #333;
17}
18
19.card .img-card {
20  position: absolute;
21  top: 0;
22  left: 0;
23  width: 100%;
24  height: calc(100% - 50px);
25  display: flex;
26  justify-content: center;
27  align-items: center;
28  transition: filter .2s 1s ease-in-out;
29}
30
31.card:hover .img-card {
32  filter: blur(1px);
33}
34
35.card .add-cart {
36  position: absolute;
37  top: 0;
38  left: 0;
39  width: 100%;
40  height: calc(100% - 50px);
41  background-color: rgba(0, 0, 0, 0.1);
42  text-align: center;
43  line-height: 250px;
44  font-weight: bold;
45  font-size: 19px;
46  opacity: 0;
47}
48
49.card:hover .add-cart {
50  opacity: 1;
51  transition: opacity .3s 1s ease-in-out;
52}
53
54.card .info-card {
55  position: absolute;
56  height: 50px;
57  width: 100%;
58  bottom: 0;
59  left: 0;
60  right: 0;
61  border-top: solid 1px #333;
62}
63
64.card .info-card p {
65  font-size: 14px;
66  margin: 5px;
67}
68
69