How to create a thumbnail image in CSS

Overview

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.

Steps to create a thumbnail image

The steps written below describe how we can create a thumbnail image:

  • First, we will structure a simple HTML outlay. We can have a simple paragraph saying something about our image, like “click image to see full”, inside the body.
  • Then, we will open an <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.

Create a thumbnail image