How to Create a Thumbnail Image with CSS

Thumbnail Image

How To, for Front End and Web Applications

By: Chrysanthus Date Published: 24 May 2025

A thumbnail image is a small sized image, used as a visual representation of a larger image, video, or other digital content. Thus tutorial explains How to Create a Thumbnail Image with CSS. For the project of this tutorial, when the thumbnail image is clicked, the larger image opens in a different window tab.

At the end of this tutorial is the complete code. The reader should save the file with any name, but with the extension, .html. Then open the file in a browser. Click the thumbnail image to see its larger form in a new window tab. The image is in the https://broad-network.com/ website. So the reader should be hooked onto the Internet, in order to have it downloaded to his/her home computer webpage. The reader is advised to do that before continuing to read this tutorial.

The Webpage Skeleton Code

The webpage skeleton code to which more useful code will be added is:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Thumbnail Image</title>
        <link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Description of the Web Page.">

        <style>

        </style>

        <script type="text/javascript">
        </script>
    </head>
    <body>

    </body>
    </html>

Any modern professional webpage should have at least the first four tags in the HTML head element above. The HTML style element in the head element is the style-sheet. It is short, for this project. It is the main coding for the image thumbnail. The JavaScript element will be left empty.

The HTML Body Element Content

The content of the HTML body element is:

        <h2>Thumbnail Image</h2>
        <p>Click on the image to enlarge it in a new Window Tab.</p>

        <a target="_blank" href="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_forest.jpg">
        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_forest.jpg" alt="Forest" style="width:150px"></a>

There is a hyperlink (anchor element) whose content is the image tag. The value of the src attribute of the image tag is the URL for the image. This is the image element that will appear as the small thumbnail with a width of 150px, specified in the image tag attribute, "style='width:150px' ". When a small size is specified for an image, the browser reduces the height of the image appropriately.

The purpose of the presence of the surrounding anchor element is to open a new page. The value of its href attribute is the same as the value of the src attribute of the image tag. For the image in its full size to be open in a new window tab, the "target='_blank' " attribute and value is necessary, for the anchor element.

The Stylesheet

The stylesheet is the content of the style element in the head element. It is:

            img {
                  border: 1px solid #ddd;
                  border-radius: 4px;
                  padding: 5px;
            }

            img:hover {
                  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
            }

That is all ! It is the main coding for the image thumbnail. It has the image CSS rule and the image on-hover CSS rule.

In the image CSS rule, a solid border of 1px and the gray color, #ddd is specified. The border and not the image is rounded with a radius of 4px. The four padding (gap between border and image) is 5px. Note that the border is not part of the image proper.

For the "img:hover" CSS rule, when the mouse pointer goes over the image, a shadow-box (rectangle) appears, surrounding the 4 sides of the image.

The Complete Webpage Code

And there you have it: the complete webpage code is:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Thumbnail Image</title>
        <link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Description of the Web Page.">

        <style>
            img {
                  border: 1px solid #ddd;
                  border-radius: 4px;
                  padding: 5px;
            }

            img:hover {
                  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
            }
        </style>

        <script type="text/javascript">
        </script>
    </head>
    <body>
        <h2>Thumbnail Image</h2>
        <p>Click on the image to enlarge it in a new Window Tab.</p>

        <a target="_blank" href="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_forest.jpg"><img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_forest.jpg" alt="Forest" style="width:150px"></a>
    </body>
    </html>

The reader should save the file with any name, but with the extension, .html. Then open the file in a browser. Click the thumbnail image to see its larger form in a new window tab. The image is in the https://broad-network.com/ website. So the reader should be hooked onto the Internet, in order to have it downloaded to his/her home computer webpage.

Chrys

Broad Network

Series Articles