#      
## 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.



<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
  height: 100px;
}
}

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.main{
  display:flex;
  justify-content:center;
}
</style>
</head>
<body>

<div class="main">
    <div>
        <h2>Thumbnail Image</h2>
        <p>Click on the image to enlarge it.</p>
    </div>
        <a target="_blank" href="https://images.unsplash.com/photo-1524850301259-7729d41d11d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1394&q=80">
          <img src="https://images.unsplash.com/photo-1524850301259-7729d41d11d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1394&q=80" alt="Forest" style="width:150px">
        </a>
    
</div>
<div id="hold"></div>
</body>
</html>


// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

codemirror

How to create a thumbnail image in CSS

Create a smaller, bordered thumbnail image in HTML using an anchor and `img` tag, styled with CSS.