How to Create Thumbnail Images

Thumbnail is a small representation of a large image. This kind of images is mainly used by Websites, which contain many pictures, for making the page download easier and faster. Our snippet will help you to create thumbnail images, including the ones as links.

It’s straightforward, so let’s start to create one together.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Use the <img> tag, choosing the src attribute to put the image you need.
  • Put the width attribute to define the width of your image.
  • Use the alt attribute to define the alternate text for the image.
<img src="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/autumn/autumn-leaves-against-a-blue-sky-photo-andrew-small.jpg" alt="Autumn" width="200">

Add CSS

  • Add borders to your image with the help of the border property.
  • Use the padding property to create space on all sides of the image.
img {
  border: 2px solid #C0C0C0;
  padding: 5px;
}

Let’s bring together the parts of our code.

Example of creating a thumbnail image:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        border: 2px solid #C0C0C0;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <img src="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/autumn/autumn-leaves-against-a-blue-sky-photo-andrew-small.jpg" alt="Autumn" width="200">
  </body>
</html>

Result

Autumn
  • Use the CSS :hover pseudo-class to select and style the link.
  • Put the CSS box-shadow property to implement multiple shadows around the box specifying its color and size.
img:hover {
  box-shadow: 5px 4px 10px #8B0000;
}
  • Go back to HTML and put the <a> tag to add a hyperlink to your image and use the _blank value of the target attribute, which will open the link in a new window.
<a target="_blank" href="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/autumn/autumn-leaves-against-a-blue-sky-photo-andrew-small.jpg">
 <img src="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/autumn/autumn-leaves-against-a-blue-sky-photo-andrew-small.jpg" alt="Autumn" width=”200">
</a>

Now, we can try some examples.

Example of making the thumbnail image a link opening on a new page:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        border: 2px solid #C0C0C0;
        padding: 5px;
      }
      img:hover {
        box-shadow: 5px 4px 10px #8B0000;
      }
    </style>
  </head>
  <body>
    <a target="_blank" href="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/autumn/autumn-leaves-against-a-blue-sky-photo-andrew-small.jpg">
      <img src="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/autumn/autumn-leaves-against-a-blue-sky-photo-andrew-small.jpg" alt="Autumn" width="200">
    </a>
  </body>
</html>

Instead of the _blank value of the target attribute, you can use other values too, which will open the link of the image in different ways.

Example of making the thumbnail image a link opening on the same page:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        border: 2px solid #C0C0C0;
        padding: 5px;
      }
      img:hover {
        box-shadow: 0px 4px 5px #FFD700;
      }
    </style>
  </head>
  <body>
    <a target="_self" href="https://www.groovypost.com/wp-content/uploads/2019/07/sunset-beach-phone-photos-featured.jpg">
      <img src="https://www.groovypost.com/wp-content/uploads/2019/07/sunset-beach-phone-photos-featured.jpg" alt="photo" width="300">
    </a>
  </body>
</html>