How To Create a Thumbnail Image using HTML and CSS ?

Last Updated : 04 Dec, 2023

The thumbnail image is used to add a 1px rounded border around the image. A thumbnail is a small size image that represents a larger image. The thumbnail is the image that is displayed as a preview of the video. It is used to represent what the video contains or what it is related to. It is displayed until the time the video is started.

We will use HTML and CSS to create a Thumbnail image. First, we take an image, set the image size as a thumbnail, and add rounded borders to the image.

Example: In this example, we will create a thumbnail image.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <title> 
        Thumbnail Image using HTML and CSS 
    </title> 
  
    <style> 
        .thumb-container { 
            width: 300px; 
            height: 180px; 
            overflow: hidden; 
            padding: 5px; 
            border: 1px solid #e1e1e1; 
            border-radius: 8px; 
            margin: 20px; 
        } 
  
        .thumb-image { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            border-radius: 5px; 
        } 
  
        .thumb-image:hover { 
            scale: 1.02; 
            cursor: pointer; 
        } 
  
        .thumb-container:hover { 
            box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); 
        } 
    </style> 
</head> 
  
<body> 
    <div class="thumb-container"> 
        <img class="thumb-image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230427130955/CSS-Tutorial.webp"
            alt="Thumbnail Image"> 
    </div> 
</body> 
  
</html>