CSS Image Gallery
- Previous page CSS Dropdown Menu
- Next page CSS Image Sprites
CSS can be used to create image galleries.
Yellow Tulip
Red Tulip
Flowers and Grasses
Flowers and Grasses
Image Gallery
The following image gallery is created using CSS:
Example
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="/i/photo/tulip-yellow.jpg">
<img src="/i/photo/tulip-yellow.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add image description here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add image description here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add image description here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add image description here</div>
</div>
</body>
</html>
More examples
- Responsive image gallery
- How to use CSS media queries to create a responsive image gallery that looks good on desktops, tablets, and smartphones.
- Previous page CSS Dropdown Menu
- Next page CSS Image Sprites
