1.card {
2  overflow: visible;
3  position: relative;
4  width: 190px;
5  height: 254px;
6  background: #fff;
7  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
8}
9
10.card:before,
11.card:after {
12  content: "";
13  position: absolute;
14  top: 0;
15  left: 0;
16  width: 100%;
17  height: 100%;
18  border-radius: 4px;
19  background: #fff;
20  transition: 0.5s;
21  z-index: -99;
22}
23
24.details {
25  position: absolute;
26  left: -10px;
27  right: 0;
28  bottom: 5px;
29  height: 60px;
30  text-align: center;
31  text-transform: uppercase;
32}
33
34/*Image*/
35.imgbox {
36  position: absolute;
37  top: 10px;
38  left: 10px;
39  bottom: 10px;
40  right: 10px;
41  background: #222;
42  transition: 0.5s;
43  z-index: 1;
44}
45
46.img {
47  background: #4158D0;
48  background-image: linear-gradient(45deg, #4158D0, #C850C0);
49  position: absolute;
50  top: 0;
51  left: 0;
52  width: 100%;
53  height: 100%;
54}
55
56/*Text*/
57.title {
58  font-weight: 600;
59  font-size: 20px;
60  color: #777;
61}
62
63.caption {
64  font-weight: 500;
65  font-size: 16px;
66  color: #4158D0;
67  display: block;
68  margin-top: 5px;
69}
70
71/*Hover*/
72.card:hover .imgbox {
73  bottom: 80px;
74}
75
76.card:hover:before {
77  transform: rotate(20deg);
78}
79
80.card:hover:after {
81  transform: rotate(10deg);
82  box-shadow: 0 2px 20px rgba(0, 0, 0, .2);
83}