How to create a thumbnail image with CSS?
The thumbnail image is a small representation of the large image on a webpage. It is generally used when the webpage has lots of images. This thumbnail can be clicked to make the image large. The thumbnail image is also used to download the image.
In this tutorial, we will learn to create a thumbnail with CSS.
Thumbnail image with CSS
To create a thumbnail add an image using an HTML <img> tag. Also, Use CSS border property to add a border to the image. Set the smaller width to image with CSS width property. Add some padding too. To enlarge the image wrap the image within <a> tag. Add same image link within href attribute.
Example: Creating a thumbnail image with CSS
In this example, we have created a thumbnail image. When you click on the image it opens up in its actual size.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
img {
width: 100px;
border: 2px solid gray;
padding: 5px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<h2> Thumbnail image </h2>
<p> Click on image to open the large image </p>
<a href="https://s3.studytonight.com/tutorials/uploads/pictures/1629364531-101156.jpeg">
<img src="https://s3.studytonight.com/tutorials/uploads/pictures/1629364531-101156.jpeg">
</a>
<a href="https://s3.studytonight.com/tutorials/uploads/pictures/1629364464-101156.jpeg">
<img src="https://s3.studytonight.com/tutorials/uploads/pictures/1629364464-101156.jpeg">
</a>
</body>
</html>
Output
Here is the output of the above code.
Example: Downloadable thumbnail image
The download attribute can be used within the <a> tag to make the thumbnail image downloadable.
Example: Open thumbnail image in new tab
Previously, we have seen that the thumbnail image opens on the same page. but we can use target = "_blank" within <a> tag to open it in a new tab. We can use other values for target attribute like _self which opens the image in the same tab.
Conclusion
In this tutorial, we have learned to create a thumbnail image with CSS. The thumbnail image can be opened in the same or new tab using target attribute. It can also be downloadable using download attribute.
