Card by Sharkotech

1.card {
2  width: 190px;
3  height: 254px;
4  background: rgba(211, 211, 211, 0.199);
5  position: absolute;
6  transition: .3s ease-in-out;
7  cursor: pointer;
8  box-shadow: 0px 0px 30px -10px rgba(0, 0, 0, 0.3);
9}
10
11#c1 {
12  background-color: black;
13}
14
15#c2 {
16  background-color: blue;
17}
18
19#c3 {
20  background-color: red;
21}
22
23#c4 {
24  background-color: green;
25}
26
27.main:hover #c1 {
28  transform: translateX(-100px) rotate(-40deg);
29}
30
31.main:hover #c2 {
32  transform: translateX(-50px) rotate(-30deg);
33}
34
35.main:hover #c3 {
36  transform: translateX(0) rotate(-20deg);
37}
38
39.main:hover #c4 {
40  transform: translateX(50px) rotate(-10deg);
41}
42
43#c1:hover {
44  transform: translateX(-150px) rotate(0deg) !important;
45}
46
47#c2:hover {
48  transform: translateX(-100px) rotate(0deg) !important;
49}
50
51#c3:hover {
52  transform: translateX(-50px) rotate(0deg) !important;
53}
54
55#c4:hover {
56  transform: translateX(50px) rotate(0deg) !important;
57}
58
59.main {
60  display: grid;
61  height: 50vmax;
62  place-items: center;
63}