This code snippet helps you to create a gallery of images that can be viewed in a lightbox. The gallery consists of a div element with an id of “gallery” containing multiple div elements, each with an image and a link to a lightbox. Each link has an href attribute pointing to a div element with a class of “lightbox” and a unique id, and each lightbox div contains an image and a title. The lightbox is activated when the user clicks on a link in the gallery, which causes the corresponding lightbox to display with the selected image and title.
How to Create a Responsive Image Gallery with Number Listing
Create the HTML structure for the gallery as follows:
<div id="gallery">
<div><img src="https://picsum.photos/600/600/?image=512"/><a href="#lightbox-1">512</a></div>
<div><img src="https://picsum.photos/600/600/?image=513"/><a href="#lightbox-2">513</a></div>
<div><img src="https://picsum.photos/600/600/?image=514"/><a href="#lightbox-3">514</a></div>
<div><img src="https://picsum.photos/600/600/?image=515"/><a href="#lightbox-4">515</a></div>
<div><img src="https://picsum.photos/600/600/?image=516"/><a href="#lightbox-5">516</a></div>
<div><img src="https://picsum.photos/600/600/?image=517"/><a href="#lightbox-6">517</a></div>
<div><img src="https://picsum.photos/600/600/?image=518"/><a href="#lightbox-7">518</a></div>
<div><img src="https://picsum.photos/600/600/?image=519"/><a href="#lightbox-8">519</a></div>
<div><img src="https://picsum.photos/600/600/?image=520"/><a href="#lightbox-9">520</a></div>
<div><img src="https://picsum.photos/600/600/?image=521"/><a href="#lightbox-10">521</a></div>
<div><img src="https://picsum.photos/600/600/?image=522"/><a href="#lightbox-11">522</a></div>
<div><img src="https://picsum.photos/600/600/?image=523"/><a href="#lightbox-12">523</a></div>
<div><img src="https://picsum.photos/600/600/?image=524"/><a href="#lightbox-13">524</a></div>
<div><img src="https://picsum.photos/600/600/?image=525"/><a href="#lightbox-14">525</a></div>
<div><img src="https://picsum.photos/600/600/?image=526"/><a href="#lightbox-15">526</a></div>
<div><img src="https://picsum.photos/600/600/?image=527"/><a href="#lightbox-16">527</a></div>
<div><img src="https://picsum.photos/600/600/?image=528"/><a href="#lightbox-17">528</a></div>
<div><img src="https://picsum.photos/600/600/?image=529"/><a href="#lightbox-18">529</a></div>
</div>
<div class="lightbox" id="lightbox-1">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=512"/>
<div class="title">No. <b>512</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-2">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=513"/>
<div class="title">No. <b>513</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-3">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=514"/>
<div class="title">No. <b>514</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-4">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=515"/>
<div class="title">No. <b>515</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-5">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=516"/>
<div class="title">No. <b>516</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-6">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=517"/>
<div class="title">No. <b>517</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-7">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=518"/>
<div class="title">No. <b>518</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-8">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=519"/>
<div class="title">No. <b>519</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-9">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=520"/>
<div class="title">No. <b>520</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-10">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=521"/>
<div class="title">No. <b>521</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-11">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=522"/>
<div class="title">No. <b>522</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-12">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=523"/>
<div class="title">No. <b>523</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-13">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=524"/>
<div class="title">No. <b>524</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-14">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=525"/>
<div class="title">No. <b>525</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-15">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=526"/>
<div class="title">No. <b>526</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-16">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=527"/>
<div class="title">No. <b>527</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-17">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=528"/>
<div class="title">No. <b>528</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
<div class="lightbox" id="lightbox-18">
<div class="content"><img src="https://picsum.photos/1920/1080/?image=529"/>
<div class="title">No. <b>529</b> from Picsum</div><a class="close" href="#gallery"></a>
</div>
</div>
Style the gallery using the following CSS styles:
* {
box-sizing: border-box;
}
body {
margin: 5px;
position: relative;
}
#gallery {
display: grid;
height: calc(100vh - 10px);
grid-template: repeat(6, 1fr)/repeat(6, 1fr);
grid-gap: 0.5em;
}
@media (max-width: 800px) {
#gallery {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: center;
}
#gallery > div {
width: 48%;
margin: 1%;
}
}
@media (max-width: 800px) and (max-width: 350px) {
#gallery > div {
width: 98%;
}
}
#gallery > div:nth-child(6n+1) {
grid-column: span 2;
grid-row: span 2;
}
#gallery > div:nth-child(2) {
grid-column: span 3;
grid-row: span 3;
}
#gallery > div:nth-child(4) {
grid-column: span 1;
grid-row: span 2;
}
#gallery > div > a {
opacity: 0;
position: absolute;
color: #000;
background-color: #000;
font: bold 4em "Helvetica";
text-shadow: 0 -1px 5px #fff, -1px 0px 5px #fff, 0 1px 5px #fff, 1px 0px 5px #fff;
padding: 2rem;
mix-blend-mode: difference;
width: 100%;
height: 100%;
transition: all ease 1s;
}
#gallery > div > img {
width: 100%;
min-height: 100%;
transition: all ease 1s;
}
#gallery > div:hover img {
filter: blur(4px);
}
#gallery > div:hover a {
opacity: 1;
}
#gallery > div {
overflow: hidden;
position: relative;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 20px 0 rgba(0, 0, 0, 0.19);
}
#gallery div,
#gallery a {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
[id^=lightbox-] {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
opacity: 0;
transition: opacity 450ms ease-in-out;
align-items: center;
justify-content: center;
pointer-events: none;
}
[id^=lightbox-]:target {
opacity: 1;
pointer-events: inherit;
}
[id^=lightbox-]:target img {
filter: blur(0);
}
[id^=lightbox-] .content {
max-width: 90%;
position: relative;
color: #fff;
}
[id^=lightbox-] .content:hover > a.close {
opacity: 1;
transform: scale(1, 1);
}
[id^=lightbox-] .content:hover > .title {
opacity: 1;
transform: translateY(-3px);
}
[id^=lightbox-] .content:hover > .title::after {
opacity: 1;
}
[id^=lightbox-] .content > * {
transition: all 450ms ease-in-out;
}
[id^=lightbox-] .title {
display: block;
margin: 0;
padding: 1em;
position: absolute;
bottom: 0;
width: 100%;
transform: translateY(50%);
font-size: 1.5em;
opacity: 0;
}
[id^=lightbox-] .title::after {
content: " ";
background-color: rgba(0, 0, 0, 0.4);
bottom: 0;
left: 0;
height: 100%;
width: 100%;
position: absolute;
transition: all 350ms ease-in-out 250ms;
opacity: 0;
transform-origin: bottom;
mix-blend-mode: soft-light;
}
[id^=lightbox-] img {
max-height: 90vh;
max-width: 100%;
margin: 0;
padding: 0;
filter: blur(50px);
}
[id^=lightbox-] a.close {
width: 2em;
height: 2em;
position: absolute;
right: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
transform: scale(0, 0);
opacity: 0;
transform-origin: right top;
text-decoration: none;
color: #fff;
}
[id^=lightbox-] a.close::after {
content: "X";
}
That’s all! hopefully, you have successfully created a responsive image gallery with number listing . If you have any questions or suggestions, feel free to comment below.
