Skip to content

Commit ec87b55

Browse files
jonathanedempseyjonathanedempsey
committed
20 - CSS Grid Image Gallery Start Files
1 parent 08ca238 commit ec87b55

File tree

14 files changed

+289
-0
lines changed

14 files changed

+289
-0
lines changed

‎20 - CSS Grid Image Gallery/image-gallery-FINISHED.html

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>CSS Grid Image Gallery!</title>
9+
</head>
10+
11+
<body>
12+
13+
<div class="overlay">
14+
<div class="overlay-inner">
15+
<button class="close">× Close</button>
16+
<img>
17+
</div>
18+
</div>
19+
20+
<section class="gallery">
21+
</section>
22+
23+
24+
<style>
25+
* {
26+
box-sizing: border-box;
27+
}
28+
29+
body {
30+
padding: 50px;
31+
font-family: sans-serif;
32+
background: linear-gradient(to right, #F93D66, #6D47D9);
33+
}
34+
35+
h1,
36+
h2,
37+
h3,
38+
h4,
39+
h5,
40+
h6 {
41+
margin: 0 0 5px 0;
42+
}
43+
44+
p {
45+
margin: 0 0 20px 0;
46+
}
47+
48+
.close {
49+
background: none;
50+
color: black;
51+
border: 0;
52+
}
53+
54+
.gallery {
55+
display: grid;
56+
grid-template-columns: repeat(auto-fill, 100px);
57+
grid-auto-rows: 100px;
58+
grid-auto-flow: dense;
59+
}
60+
61+
.item {
62+
overflow: hidden;
63+
display: grid;
64+
grid-template-columns: 1;
65+
grid-template-rows: 1;
66+
}
67+
68+
.item img {
69+
grid-column: 1 / -1;
70+
grid-row: 1 / -1;
71+
width: 100%;
72+
height: 100%;
73+
object-fit: cover;
74+
}
75+
76+
.item__overlay {
77+
background: #ffc60032;
78+
grid-column: 1 / -1;
79+
grid-row: 1 / -1;
80+
position: relative;
81+
display: grid;
82+
justify-items: center;
83+
align-items: center;
84+
transition: 0.2s;
85+
transform: translateY(100%);
86+
}
87+
88+
.item__overlay button {
89+
background: none;
90+
border: 2px solid white;
91+
color: white;
92+
text-transform: uppercase;
93+
background: rgba(0, 0, 0, 0.7);
94+
padding: 5px;
95+
}
96+
97+
.item:hover .item__overlay {
98+
transform: translateY(0);
99+
}
100+
101+
102+
.item.v2 {
103+
grid-row: span 2;
104+
}
105+
106+
.item.v3 {
107+
grid-row: span 3;
108+
}
109+
110+
.item.v4 {
111+
grid-row: span 4;
112+
}
113+
114+
.item.h2 {
115+
grid-column: span 2;
116+
}
117+
118+
.item.h3 {
119+
grid-column: span 3;
120+
}
121+
122+
.item.h4 {
123+
grid-column: span 4;
124+
}
125+
126+
127+
.overlay {
128+
position: fixed;
129+
background: rgba(0, 0, 0, 0.7);
130+
top: 0;
131+
right: 0;
132+
bottom: 0;
133+
left: 0;
134+
display: none;
135+
z-index: 2;
136+
}
137+
138+
.overlay.open {
139+
display: grid;
140+
align-items: center;
141+
justify-items: center;
142+
}
143+
144+
.overlay-inner {
145+
background: white;
146+
width: 700px;
147+
padding: 20px;
148+
}
149+
150+
.overlay img {
151+
width: 100%;
152+
}
153+
</style>
154+
155+
<script>
156+
const gallery = document.querySelector('.gallery');
157+
const overlay = document.querySelector('.overlay');
158+
const overlayImage = overlay.querySelector('img');
159+
const overlayClose = overlay.querySelector('.close');
160+
161+
function generateHTML([h, v]) {
162+
return `
163+
<div class="item h${h} v${v}">
164+
<img src="images/${randomNumber(12)}.jpg">
165+
<div class="item__overlay">
166+
<button>View →</button>
167+
</div>
168+
</div>
169+
`;
170+
}
171+
172+
function randomNumber(limit) {
173+
return Math.floor(Math.random() * limit) + 1;
174+
}
175+
176+
function handleClick(e) {
177+
const src = e.currentTarget.querySelector('img').src;
178+
overlayImage.src = src;
179+
overlay.classList.add('open');
180+
}
181+
182+
183+
function close() {
184+
overlay.classList.remove('open');
185+
}
186+
187+
const digits = Array.from({ length: 50 }, () => [randomNumber(4), randomNumber(4)]).concat([[1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1]])
188+
189+
const html = digits.map(generateHTML).join('');
190+
gallery.innerHTML = html;
191+
192+
const items = document.querySelectorAll('.item');
193+
194+
items.forEach(item => item.addEventListener('click', handleClick));
195+
196+
overlayClose.addEventListener('click', close);
197+
198+
</script>
199+
</body>
200+
201+
</html>

‎20 - CSS Grid Image Gallery/image-gallery-START.html

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>CSS Grid Image Gallery!</title>
9+
</head>
10+
11+
<body>
12+
13+
<div class="overlay">
14+
<div class="overlay-inner">
15+
<button class="close">× Close</button>
16+
<img>
17+
</div>
18+
</div>
19+
20+
<section class="gallery">
21+
</section>
22+
23+
24+
<style>
25+
* {
26+
box-sizing: border-box;
27+
}
28+
29+
body {
30+
padding: 50px;
31+
font-family: sans-serif;
32+
background: linear-gradient(to right, #F93D66, #6D47D9);
33+
}
34+
35+
h1,
36+
h2,
37+
h3,
38+
h4,
39+
h5,
40+
h6 {
41+
margin: 0 0 5px 0;
42+
}
43+
44+
p {
45+
margin: 0 0 20px 0;
46+
}
47+
48+
.close {
49+
background: none;
50+
color: white;
51+
border: 0;
52+
}
53+
54+
.gallery {}
55+
56+
57+
58+
.overlay {
59+
position: fixed;
60+
background: rgba(0, 0, 0, 0.7);
61+
top: 0;
62+
right: 0;
63+
bottom: 0;
64+
left: 0;
65+
display: none;
66+
z-index: 2;
67+
}
68+
69+
.overlay.open {
70+
display: grid;
71+
}
72+
73+
.overlay figure {
74+
background: white;
75+
width: 700px;
76+
padding: 20px;
77+
}
78+
79+
.overlay img {
80+
width: 100%;
81+
}
82+
</style>
83+
84+
<script>
85+
</script>
86+
</body>
87+
88+
</html>

‎20 - CSS Grid Image Gallery/images/1.jpg

56.6 KB
Loading

‎20 - CSS Grid Image Gallery/images/10.jpg

34.5 KB
Loading

‎20 - CSS Grid Image Gallery/images/11.jpg

86.3 KB
Loading

‎20 - CSS Grid Image Gallery/images/12.jpg

87.8 KB
Loading

‎20 - CSS Grid Image Gallery/images/2.jpg

72.1 KB
Loading

‎20 - CSS Grid Image Gallery/images/3.jpg

45.5 KB
Loading

‎20 - CSS Grid Image Gallery/images/4.jpg

84.3 KB
Loading

‎20 - CSS Grid Image Gallery/images/5.jpg

80.9 KB
Loading

0 commit comments

Comments
 (0)