CSS Image Gallery
CSS can be used to create an image gallery.
Add a description of the image here
Add a description of the image here
Add a description of the image here
Add a description of the image here
Image Gallery
The following image gallery is created with 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="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a> <div class="desc">Add a description of the image 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 a description of the image 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 a description of the image 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 a description of the image here</div>
</div>
</body>
</html>
Try it Yourself »
More Examples
Responsive Image Gallery
How to use CSS media queries to create a responsive image gallery that will
look good on desktops, tablets and smart phones.
Try it Yourself »
★
+1
Reference: https://www.w3schools.com/css/css_image_gallery.asp
CSS Image Gallery
CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.