CSS Image Gallery
Image galleries are used to display and store collections of images.
Example
Let’s discuss an example.
CSS was used to create the following image gallery:
Code is as follows:
<html>
<head>
<style>
div.gallery {
margin: 6px;
border: 1px solid rgb (185, 153, 153);
float: left;
width: 175px;
}
div.gallery:hover {
border: 1px solid rgb(141, 112, 112);
}
div.gallery img {
width: 105%;
height: auto;
}
div.desc {
padding: 16px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="coastline_image.png">
<img src="coastline_image.png" alt="coastline - Cinque Terre" width="550" height="50">
</a>
<div class="desc">Here is where you can describe the image</div>
</div>
<div class="gallery">
<a target="_blank" href="rivermountain_image.png">
<img src="rivermountain_image.png" alt="river-mountain" width="550" height="410">
</a>
<div class="desc">Here is where you can describe the image</div>
</div>
<div class="gallery">
<a target="_blank" href="northlight_image.png">
<img src="northlight_image.png" alt="Northern-Lights" width="550" height="410">
</a>
<div class="desc">Here is where you can describe the imagee</div>
</div>
<div class="gallery">
<a target="_blank" href="forest_image.png">
<img src="forest_image.png" alt="Forest.." width="550" height="410">
</a>
<div class="desc">Here is where you can describe the image</div>
</div>
</body>
</html>
The output for this above code is shown below:
Responsive Image Gallery
The following example essentially shows how to make a responsive Image Gallery using HTML and CSS.
The following steps will help you essentially create a responsive image gallery:
- Step 1: Laying out the kind of basic structure of a gallery.
There are some div sections in each gallery. Within each div section, an image and a description are displayed.
<div class="gallery">
<div class="box">
<div class="image"> The image is added here </div>
<div class="text"> The text is added here </div>
</div>- Step 2: A CSS style sheet can be used to style the file
Here essentially are some guidelines for styling the gallery container:
Select flex as the display property. It literally means that items within the gallery container will display in a flex context in a big way.
To set the flex-flow property to row wrap, set it to true, or so they thought. This specifies both the direction of flexing and the style of wrapping.
.gallery {
width:110%;
display:flex;
flex-flow: row wrap;
}
- Box styling is done below:
.box {
flex-basis: 18%;
width: 110%;
padding: 11px;
margin: 9px;
// Set the blur shadow
box-shadow: 1px 1px 14px 1px red;
}
- Step 3: By using @media query to make a responsive image gallery
@media only screen and (max-width: 310px)
{
.box {
flex-basis: 105%;
}
Code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
/* style to set body of page */
body {
width:90%;
margin:auto;
}
.gallery {
width:90%;
display:flex;
flex-flow: row wrap;
}
.box {
flex-basis:18%;
width:90%;
padding:11px;
margin:9px;
box-shadow: 1px 1px 14px 1px red;
}
.text {
text-align:center;
margin-top:5px;
}
.image:hover {
border: 3px solid red ;
}
/* media query used here */
@media only screen and (max-width: 300px) {
.box {
flex-basis: 100%;
}
}
@media only screen and (max-width:300px) {
.box {
flex-basis: 40%;
}
}
</style>
</head>
<body>
<div class = "gallery">
<div class = "box">
<div class = "image">
<a target="_blank" href=
"javatpoint logo_image.png">
<img src =
"javatpoint logo_image.png"
width = "300" height = "200">
</a>
</div>
<div class = "text">
Javatpoint Image
</div>
</div>
<div class = "box">
<div class = "image">
<a target="_blank" href=
"logo image.png">
<img src =
"logo image.png"
width = "300" height = "200">
</a>
</div>
<div class = "text">
Javatpoint Image
</div>
</div>
<div class = "box">
<div class = "image">
<a target="_blank" href=
"Javatpoint img.png">
<img src =
"Javatpoint img.png"
width = "300" height = "200">
</a>
</div>
<div class = "text">
Javatpoint Interview qns Image
</div>
</div>
</body>
</html>
The output for this above code is shown below:
(Responsive image gallery is shown in output)
- Some more example for responsive image gallery:
- Here are some CSS media queries that you can use to make a responsive image gallery that will look good on any device, including desktops, tablets, and smart phones.
Example
Code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
border: 1px solid rgb(233, 133, 133);
}
div.gallery:hover {
border: 1px solid rgb(241, 121, 121);
}
div.gallery img {
width: 90%;
height: auto;
}
div.desc {
padding: 14px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 23.99999%;
}
@media only screen and (max-width: 600px) {
.responsive {
width: 48.99999%;
margin: 5px 0;
}
}
@media only screen and (max-width: 460px) {
.responsive {
width: 90%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2> Responsive Image Gallery </h2>
<h4>The effect can be seen by resizing the browser window. </h4>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="coastline_image.png">
<img src="coastline_image.png" alt="coastline Cinque-Terre" width="500" height="300">
</a>
<div class="desc">Here is where you can describe the image</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="rivermountain_image.png">
<img src="rivermountain_image.png" alt="River - Mountain" width="500" height="300">
</a>
<div class="desc">Here is where you can describe the image</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="northlight_image.png">
<img src="northlight_image.png" alt="North lights.." width="500" height="300">
</a>
<div class="desc">Here is where you can describe the image</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href ="forest_image.png">
<img src="forest_image.png" alt="forest_image..." width="500" height="300">
</a>
<div class="desc">Here is where you can describe the image</div>
</div>
</div>
<div class="clearfix"></div>
<div style="padding: 6px;">
<p>Media queries and responsive web design will be covered in more detail in our CSS tutorial. </p>
</div>
</body>
</html>
In this example, we use media queries to change the arrangement of the images on different screen sizes: <br> for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px wide, <br> it will show two images side by side. When the screen size is less than 500px, the images stack vertically (100%).
The output for this above code is shown below:
(Responsive image gallery is shown in output)
