A thumbnail image is the smaller version of an image. When we click a thumbnail image, the full or larger size of the image is displayed. Nowadays, thumbnail images are very commonly used in social media applications and websites.
A thumbnail is characterized by borders which surround it, either to give it a circular, rectangular, or square shape.
The steps written below describe how we can create a thumbnail image:
body
.<a>
tag and structure it like how it’s shown below. The target="_blank"
attribute and value tells the web browser to open the full size image in a new browser window. <a target="_blank" href="image_path">
<img src="image_path" alt="">
</a>
The href
value of the image_path
is the relative or absolute path to our image. This serves as the link to display the image being called up in the <img>
tag src
attribute value.
We will style our thumbnail image to the little size we want it to be. We can also style the thumbnail to have a circular shape or any other shape we want and to have a nice border around it.
Now, our simple thumbnail image is ready.
Let’s look at the demo code below, which follows the steps listed above.