daysofcode/2019/00/day-2/day-2.css at master · w3dotdev/daysofcode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/* Card */
.card {
  border-radius: 4px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #000;
  overflow: hidden;
  box-shadow: 0 5px 10px rgba(0,0,0, 0.5);
  width: 300px;
  height: 450px;
}

.card .poster { position: relative; overflow: hidden; }

.card .poster:before {
  content: "";
  position: absolute ;
  bottom: -150px;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg,#000 50%, transparent);
  transition: 0.5s;
  z-index: 1;
}

.card .poster-image { width: 100%; transition: 0.5s; }

/* Details */
.details {
  position: absolute;
  padding: 20px;
  width: 100%;
  height: 40%;
  bottom: -110px;
  left: 0;
  box-sizing: border-box;
  transition: 0.5s;
  z-index: 2;
}

.details-title { color: #fff; font-size: 20px; }

.details-subtitle { font-size: 12px; color: #ff9800; }
.details-subtitle-hl { font-size: 14px; font-weight: 700; }

/* Card - Hover */
.card:hover .poster:before { bottom: 0; }
.card:hover .poster-image { filter: blur(2px); transform: translateY(-30px); }
.card:hover .details { bottom: 0; }

/* Casting */
.casting { position: relative; margin-top: 15px; }

.casting-title { font-size: 20px; color: #f7f406; }

.casting-list { display: flex; margin: 10px 0 0; }

.casting-item {
  list-style: none;
  width: 45px;
  height: 45px;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 6px;
  border: 2px solid #fff;
}

.casting-image { width: 100%; }