Dia 26/2019 - Galeria com Modal

Desafio #92daysofcode que fiz no final de 2019. Nesse artigo temos o dia 26, mostrando o uso do seletor de irmãos seletor ~ seletor, com a pseudo-classe :checked.

Pré-visualização

Código

Começamos com a estrutura do HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Day 26</title>
<style>
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; }
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
* { margin: 0; padding: 0; list-style: none; outline: none; }
body { background: #eee; font-family: Arial, Helvetica, sans-serif; }
.container { margin: 80px auto; max-width: 992px; text-align: center; width: 100%; }
</style>
<link rel="stylesheet" type="text/css" href="./day-26.css">
</head>
<body>
<div class="container">
<!-- gallery -->
</div>
</body>
</html>
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
<input type="radio" class="input" name="modal" id="close" checked />

<input type="radio" class="input" name="modal" id="photo-1" />
<input type="radio" class="input" name="modal" id="photo-2" />
<input type="radio" class="input" name="modal" id="photo-3" />
<input type="radio" class="input" name="modal" id="photo-4" />
<input type="radio" class="input" name="modal" id="photo-5" />
<input type="radio" class="input" name="modal" id="photo-6" />
<input type="radio" class="input" name="modal" id="photo-7" />
<input type="radio" class="input" name="modal" id="photo-8" />

<div class="main">
<section class="gallery">
<label class="gallery-item" for="photo-1"><img class="gallery-item-image" src="https://place-hold.it/200x200/4b1f71/fff&text=1" /></label>
<label class="gallery-item" for="photo-2"><img class="gallery-item-image" src="https://place-hold.it/200x200/1f2871/fff&text=2" /></label>
<label class="gallery-item" for="photo-3"><img class="gallery-item-image" src="https://place-hold.it/200x200/23711f/fff&text=3" /></label>
<label class="gallery-item" for="photo-4"><img class="gallery-item-image" src="https://place-hold.it/200x200/711f1f/fff&text=4" /></label>
<label class="gallery-item" for="photo-5"><img class="gallery-item-image" src="https://place-hold.it/200x200/715c1f/fff&text=5" /></label>
<label class="gallery-item" for="photo-6"><img class="gallery-item-image" src="https://place-hold.it/200x200/71371f/fff&text=6" /></label>
<label class="gallery-item" for="photo-7"><img class="gallery-item-image" src="https://place-hold.it/200x200/999/fff&text=7" /></label>
<label class="gallery-item" for="photo-8"><img class="gallery-item-image" src="https://place-hold.it/200x200/000/fff&text=8" /></label>
</section>

<div class="lightbox">
<label class="overlay" for="close"></label>
<div class="lightbox-content">
<label class="lightbox-close" for="close">fechar</label>
<div class="lightbox-photo">
<label class="lightbox-photo-label" for="photo-1"><img class="lightbox-photo-image" src="https://place-hold.it/500x500/4b1f71/fff&text=1" /></label>
<label class="lightbox-photo-label" for="photo-2"><img class="lightbox-photo-image" src="https://place-hold.it/500x500/1f2871/fff&text=2" /></label>
<label class="lightbox-photo-label" for="photo-3"><img class="lightbox-photo-image" src="https://place-hold.it/500x500/23711f/fff&text=3" /></label>
<label class="lightbox-photo-label" for="photo-4"><img class="lightbox-photo-image" src="https://place-hold.it/500x500/711f1f/fff&text=4" /></label>
<label class="lightbox-photo-label" for="photo-5"><img class="lightbox-photo-image" src="https://place-hold.it/500x500/715c1f/fff&text=5" /></label>
<label class="lightbox-photo-label" for="photo-6"><img class="lightbox-photo-image" src="https://place-hold.it/500x500/71371f/fff&text=6" /></label>
<label class="lightbox-photo-label" for="photo-7"><img class="lightbox-photo-image" src="https://place-hold.it/500x500/999/fff&text=7" /></label>
<label class="lightbox-photo-label" for="photo-8"><img class="lightbox-photo-image" src="https://place-hold.it/500x500/000/fff&text=8" /></label>
</div>
</div>
</div>
</div>
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
74
75
76
77
.input { display: none; }

.gallery { display: flex; flex-wrap: wrap; padding: 4px 0 0 4px; }
.gallery-item {
align-items: center;
cursor: pointer;
display: flex;
height: 140px;
justify-content: center;
overflow: hidden;
position: relative;
width: 25%;
}

.gallery-item:hover { opacity: 0.8; }

.gallery-item-image { width: 100%; }

#close:checked ~ .main .lightbox { background-color: transparent; pointer-events: none; }
#close:checked ~ .main .lightbox-content { opacity: 0; transform: scale(0.7); }
#close:checked ~ .main .overlay { display: none; }

.lightbox {
align-items: center;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
pointer-events: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.overlay {
cursor: pointer;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}

.lightbox-content {
background: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12);
display: flex;
-webkit-box-orient: vertical;
flex-direction: column;
max-width: 80%;
opacity: 1;
padding: 24px;
position: relative;
transform: scale(1);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s;
width: -48.45360825vh;
width: calc((80vh - 4 * 24px) / 1 + 2 * 24px);
}

.lightbox-close { cursor: pointer; font-size: 1rem; position: absolute; top: 5px; right: 10px; }

.lightbox-photo {
height: 0;
overflow: hidden;
padding-bottom: 100%;
position: relative;
transition: padding-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lightbox-photo-image { max-width: 100%; }

.lightbox-photo-label { align-items: center; display: flex; flex-direction: row; justify-content: center; }
.lightbox-photo-label:after { position: absolute; text-align: center; width: 100%; z-index: 2; }
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
74
75
76
77
78
79
80
81
82
83
84
85
86
#photo-1:checked ~ .main .lightbox-photo-label[for="photo-1"],
#photo-2:checked ~ .main .lightbox-photo-label[for="photo-2"],
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-3"],
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-4"],
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-5"],
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-6"],
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-7"],
#photo-8:checked ~ .main .lightbox-photo-label[for="photo-8"] { position: absolute; top: 0; z-index: 2; }

#photo-1:checked ~ .main .lightbox-photo-label[for="photo-2"],
#photo-2:checked ~ .main .lightbox-photo-label[for="photo-1"],
#photo-2:checked ~ .main .lightbox-photo-label[for="photo-3"],
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-2"],
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-4"],
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-3"],
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-5"],
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-4"],
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-6"],
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-5"],
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-7"],
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-6"],
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-8"],
#photo-8:checked ~ .main .lightbox-photo-label[for="photo-7"] {
align-items: center;
background: rgba(0, 0, 0, 0.54);
color: #fff;
cursor: pointer;
display: flex;
font-size: 2rem;
justify-content: center;
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
text-align: center;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
width: 20%;
z-index: 9;
}

#photo-1:checked ~ .main .lightbox-photo-label[for="photo-2"]:hover,
#photo-2:checked ~ .main .lightbox-photo-label[for="photo-1"]:hover,
#photo-2:checked ~ .main .lightbox-photo-label[for="photo-3"]:hover,
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-2"]:hover,
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-4"]:hover,
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-3"]:hover,
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-5"]:hover,
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-4"]:hover,
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-6"]:hover,
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-5"]:hover,
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-7"]:hover,
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-6"]:hover,
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-8"]:hover,
#photo-8:checked ~ .main .lightbox-photo-label[for="photo-7"]:hover { opacity: 1; }

#photo-2:checked ~ .main .lightbox-photo-label[for="photo-1"],
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-2"],
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-3"],
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-4"],
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-5"],
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-6"],
#photo-8:checked ~ .main .lightbox-photo-label[for="photo-7"] { left: -24px; }

#photo-2:checked ~ .main .lightbox-photo-label[for="photo-1"]:after,
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-2"]:after,
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-3"]:after,
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-4"]:after,
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-5"]:after,
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-6"]:after,
#photo-8:checked ~ .main .lightbox-photo-label[for="photo-7"]:after { content: '<'; }

#photo-1:checked ~ .main .lightbox-photo-label[for="photo-2"],
#photo-2:checked ~ .main .lightbox-photo-label[for="photo-3"],
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-4"],
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-5"],
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-6"],
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-7"],
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-8"] { right: -24px; }

#photo-1:checked ~ .main .lightbox-photo-label[for="photo-2"]:after,
#photo-2:checked ~ .main .lightbox-photo-label[for="photo-3"]:after,
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-4"]:after,
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-5"]:after,
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-6"]:after,
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-7"]:after,
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-8"]:after { content: '>'; }

Conclusão

A postagem original pode ser vista no meu Instagram e o código está acessível no meu Github.

Ao fechar este aviso ou continuar navegando no site Nerd Calistênico, você aceita o uso de cookies.

Este site usa cookies para assegurar a melhor experiência para os nossos usuários. Consulte nossa política de privacidade.

Uma nova versão está disponível. Clique aqui para atualizar.