How To Create a Thumbnail Image using HTML and CSS ? Last Updated : 04 Dec, 2023 Comments Improve Suggest changes Like Article Like Report 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> Output: Comment More infoAdvertise with us Next Article How To Create a Thumbnail Image using HTML and CSS ? V vkash8574 Follow Improve Article Tags : Web Technologies Geeks Premier League Web Templates Geeks Premier League 2023 Similar Reads How to create a Hero Image using HTML and CSS ? A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and designs the basic structure. The second section designs the images and texts on the images. The 2 min read How to Create Image Accordion using HTML and CSS ? In this article, we will see how to create an image accordion using HTML & CSS that is basically used for advertising purposes on e-commerce websites. An Accordion is often used to open multiple sections at full width & also content pushes the page content downward.Approach:Create an HTML fi 2 min read How to Create an Image Overlay Icon using HTML and CSS ? Image overlay Icon can be an impressive addition to interactive detail or a set of features for your website. This article content will divide the task into two sections, the first section creating the structure and attach the link for the icon. In the second section, we will design the structure us 3 min read How to Create Avatar Images using HTML and CSS ? This article will show you how to create an Avatar Image with the help of HTML and CSS. An Avatar is a visual representation of a user, often used in user profiles or comment sections on websites. Here, we have created a GFG logo avatar image. This avatar has 100px width and height, and border-radiu 1 min read How to Create Image Magnifier using HTML CSS and JavaScript? An image magnifier is a feature that allows users to zoom into specific parts of an image, simulating a magnifying glass effect. It’s created using HTML for structure, CSS for styling, and JavaScript to control the zoom functionality dynamically on hover or click.There are two methods to create an i 2 min read How to Add Border to an Image Using HTML and CSS? Adding a border to an image means putting a line around the image to make it look better and more noticeable. To add a border to an image using HTML and CSS, we can use the <img> tag and apply CSS styles like border, border-width, and border color to customize the border's appearance.Syntax.im 1 min read How to create a Spotlight Effect using HTML and CSS ? In this article, we are going to create a spotlight effect over the image when we hover over it. This is mainly based on HTML, CSS and JavaScript. The below steps have to be followed to create this effect.HTML Section: In this section, we will create a container elements for the background image and 4 min read How to Create Image Overlay Hover using HTML & CSS ? In this article, we will go over 5 different types of overlays: left, right, top, bottom, and fade. You are going to need two divs. One will be your overlay div, containing what will show up once the user hovers over the image, and the other will be a container that holds both the image and its over 6 min read How to Create Badges using HTML and CSS ? This article will show you how to create a badge using HTML and CSS. Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that 2 min read How to Add Image in Text Background using HTML and CSS ? In this article, we will use HTML and CSS to set the image in the text background. To set the image in the text background, some CSS property is used. To add an image in the text background using HTML and CSS, create a container element (e.g., a `<div>`), set its background to the desired imag 2 min read Like