It turns out it is possible to create a pure CSS gallery without using Javascript. In this article, we are going to show you how to do that with only HTML and CSS.
As we know, a gallery consists of 2 blocks of pictures. The first one contains small images (thumbnails), the other one large pictures. If you want to create a simple gallery, you must define unique anchors (picture1, picture2, picture3, picture4, picture5).
The code must look like the following:
<div id="gallery">
<ul id="navigation">
<li>
<a href="#picture1">
<img alt="small house 1" src="/uploads/media/default/0001/03/22586f08ef509e3fd151d7a923f7f2c5997f0b07.jpeg" />
</a>
</li>
<li>
<a href="#picture2">
<img alt="small house 2" src="/uploads/media/default/0001/03/103116629234462f05410cb6d43ed08065e3d4de.jpeg" />
</a>
</li>
<li>
<a href="#picture3">
<img alt="small house 3" src="/uploads/media/default/0001/03/3d9718da65fc51d97aac4c6d762af5439cf91502.jpeg" />
</a>
</li>
<li>
<a href="#picture4">
<img alt="small house 4" src="/uploads/media/default/0001/03/3eb4eb89e69c353ce1305a2c545aa1d08f811952.jpeg" />
</a>
</li>
</ul>
<div id="full-picture">
<div>
<a name="picture1"></a>
<img alt="Large house 1" src="/uploads/media/default/0001/03/0fa4b71d43929b2df12e076e56c1977be75dfbb8.jpeg" />
</div>
<div>
<a name="picture2"></a>
<img alt="Large house 2" src="/uploads/media/default/0001/03/825a2070e85851f240a3e3159ce14a209ec09ef4.jpeg" />
</div>
<div>
<a name="picture3"></a>
<img alt="Large house 3" src="/uploads/media/default/0001/03/50e11aad0765f04983e42cb992fbda3ba39322f5.jpeg" />
</div>
<div>
<a name="picture4"></a>
<img alt="Large house 4" src="/uploads/media/default/0001/03/efcd4eae59c19e488249be1872a3aca00d81d545.jpeg" />
</div>
</div>
</div>
#gallery {
width: 600px;
overflow: hidden;
position: relative;
z-index: 1;
margin: 100px auto;
border: 2px solid #003C72;
}
#navigation {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
}
#navigation li {
padding: 0;
margin: 0;
margin: 5px 0 20px;
}
#navigation li a img {
display: block;
border: none;
}
#navigation li a {
display: block;
}
#full-picture {
width: 600px;
height: 375px;
overflow: hidden;
float: left;
}
#full-picture img {
width: 100%;
}
Now our gallery is created! Let’s see the complete code.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#gallery {
width: 600px;
overflow: hidden;
position: relative;
z-index: 1;
margin: 100px auto;
border: 2px solid #003C72;
}
#navigation {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
}
#navigation li {
padding: 0;
margin: 0;
margin: 5px 0 20px;
}
#navigation li a img {
display: block;
border: none;
}
#navigation li a {
display: block;
}
#full-picture {
width: 600px;
height: 375px;
overflow: hidden;
float: left;
}
#full-picture img {
width: 100%;
}
</style>
</head>
<body>
<div id="gallery">
<ul id="navigation">
<li>
<a href="#picture1">
<img alt="small house 1"
src="/uploads/media/default/0001/03/22586f08ef509e3fd151d7a923f7f2c5997f0b07.jpeg" />
</a>
</li>
<li>
<a href="#picture2">
<img alt="small house 2"
src="/uploads/media/default/0001/03/103116629234462f05410cb6d43ed08065e3d4de.jpeg" />
</a>
</li>
<li>
<a href="#picture3">
<img alt="small house 3"
src="/uploads/media/default/0001/03/3d9718da65fc51d97aac4c6d762af5439cf91502.jpeg" />
</a>
</li>
<li>
<a href="#picture4">
<img alt="small house 4"
src="/uploads/media/default/0001/03/3eb4eb89e69c353ce1305a2c545aa1d08f811952.jpeg" />
</a>
</li>
</ul>
<div id="full-picture">
<div>
<a name="picture1"></a>
<img alt="Large house 1"
src="/uploads/media/default/0001/03/0fa4b71d43929b2df12e076e56c1977be75dfbb8.jpeg" />
</div>
<div>
<a name="picture2"></a>
<img alt="Large house 2"
src="/uploads/media/default/0001/03/825a2070e85851f240a3e3159ce14a209ec09ef4.jpeg" />
</div>
<div>
<a name="picture3"></a>
<img alt="Large house 3"
src="/uploads/media/default/0001/03/50e11aad0765f04983e42cb992fbda3ba39322f5.jpeg" />
</div>
<div>
<a name="picture4"></a>
<img alt="Large house 4"
src="/uploads/media/default/0001/03/efcd4eae59c19e488249be1872a3aca00d81d545.jpeg" />
</div>
</div>
</div>
</body>
</html>