Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create a thumbnail image CSS?

CSS Web Development Front End Technology

A thumbnail image in CSS is a small, clickable preview of a larger image that typically opens the full-size version when clicked. Thumbnails are commonly used in galleries, portfolios, and product listings to save space while providing visual previews.

Syntax

img {
    width: value;
    height: value;
    border: width style color;
    border-radius: value;
}

img:hover {
    box-shadow: values;
    transform: scale(value);
}

Example: Basic Thumbnail with Hover Effect

The following example creates a thumbnail image with a border, rounded corners, and a hover effect −

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    .thumbnail {
        border: 3px solid #d0ff00;
        border-radius: 8px;
        width: 150px;
        height: 150px;
        object-fit: cover;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .thumbnail:hover {
        box-shadow: 0 4px 8px rgba(60, 255, 53, 0.6);
        transform: scale(1.05);
    }
    
    .gallery {
        text-align: center;
        margin: 20px;
    }
</style>
</head>
<body>
    <div class="gallery">
        <h2>Thumbnail Gallery</h2>
        <a href="https://via.placeholder.com/800x600/4CAF50/white?text=Full+Size" target="_blank">
            <img src="https://via.placeholder.com/150x150/4CAF50/white?text=Thumbnail" 
                 alt="Sample thumbnail" class="thumbnail">
        </a>
        <p>Click the thumbnail to view full-size image</p>
    </div>
</body>
</html>

The output of the above code is −

A centered thumbnail image (150x150px) with a bright green border and rounded corners appears. When hovered, it scales up slightly and shows a green shadow effect. Clicking opens the full-size image in a new tab.

Key Properties for Thumbnails

Property Purpose Example Value
width/height Sets thumbnail dimensions 150px
object-fit Controls image scaling cover
border Adds visual frame 2px solid #ccc
border-radius Creates rounded corners 8px
transition Smooth hover animations all 0.3s ease

Conclusion

CSS thumbnails combine fixed dimensions, borders, and hover effects to create engaging image previews. The object-fit: cover property ensures images maintain proper proportions while fitting the thumbnail dimensions.

Updated on: 2026-03-15T14:28:33+05:30

755 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements