Image Thumb Preview on Click Using HTML, CSS & JavaScript

Want to build a simple image gallery where clicking on any thumbnail shows a larger version of the image? In this tutorial, we’ll walk through how you can create an interactive image preview system using basic HTML, CSS, and JavaScript.

🎯 Live Demo: https://code.bydev24.com/snippets/image-thumb-preview

🧱 HTML Structure

We use a table layout to display a grid of clickable thumbnails. When clicked, the associated image appears in a larger preview section.

<div class="gallery-container">
    <table width="90%" align="center" cellpadding="5">
        <tbody>
            <tr>
                <td>
                    <a href="/uploads/code-snippts/thumb1.jpg" onclick="OpenImage(event)">
                    <img src="/uploads/code-snippts/thumb1.jpg" alt="thumb">
                    </a>
                </td>
                <td>
                    <a href="/uploads/code-snippts/thumb2.jpg" onclick="OpenImage(event)">
                    <img src="/uploads/code-snippts/thumb2.jpg" alt="thumb">
                    </a>
                </td>
                <td>
                    <a href="/uploads/code-snippts/thumb3.jpg" onclick="OpenImage(event)">
                    <img src="/uploads/code-snippts/thumb3.jpg" alt="thumb">
                    </a>
                </td>
                <td>
                    <a href="/uploads/code-snippts/thumb4.jpg" onclick="OpenImage(event)">
                    <img src="/uploads/code-snippts/thumb4.jpg" alt="thumb">
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="/uploads/code-snippts/thumb5.jpg" onclick="OpenImage(event)">
                    <img src="/uploads/code-snippts/thumb5.jpg" alt="thumb">
                    </a>
                </td>
                <td rowspan="2" colspan="2">
                    <img src="/uploads/code-snippts/thumb1.jpg" alt="thumb" id="image-preview">
                </td>
                <td>
                    <a href="/uploads/code-snippts/thumb6.jpg" onclick="OpenImage(event)">
                    <img src="/uploads/code-snippts/thumb6.jpg" alt="thumb">
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="/uploads/code-snippts/thumb7.jpg" onclick="OpenImage(event)">
                    <img src="/uploads/code-snippts/thumb7.jpg" alt="thumb">
                    </a>
                </td>
                <td>
                    <a href="/uploads/code-snippts/thumb8.jpg" onclick="OpenImage(event)">
                    <img src="/uploads/code-snippts/thumb8.jpg" alt="thumb">
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="/uploads/code-snippts/thumb9.jpg" onclick="OpenImage(event)">
                    <img src="/uploads/code-snippts/thumb9.jpg" alt="thumb">
                    </a>
                </td>
                <td>
                    <a href="/uploads/code-snippts/thumb10.jpg" onclick="OpenImage(event)">
                    <img src="/uploads/code-snippts/thumb10.jpg" alt="thumb">
                    </a>
                </td>
                <td>
                    <a href="/uploads/code-snippts/thumb11.jpg" onclick="OpenImage(event)">
                    <img src="/uploads/code-snippts/thumb11.jpg" alt="thumb">
                    </a>
                </td>
                <td>
                    <a href="/uploads/code-snippts/thumb12.jpg" onclick="OpenImage(event)">
                    <img src="/uploads/code-snippts/thumb12.jpg" alt="thumb">
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

🎨 CSS Styling

Add the following CSS to give your gallery a modern, clean look along with a zoom effect on hover:

.gallery-container {
  width: 400px;
  margin: 0 auto;
  box-shadow: 0px 0px 10px #00000026;
  border-radius: 10px;
  padding: 10px 0;
}
.gallery-container img {
  width: 100%;
  cursor: pointer;
  transition-duration: 0.5s;
  pointer-events: none;
}
.gallery-container a {
  display: flex;
  overflow: hidden;
  border-radius: 5px;
}
.gallery-container a:hover img {
  transform: scale(1.1);
}

⚙️ JavaScript Function

Here’s the JavaScript function that allows the preview image to change when a thumbnail is clicked:

//Open Image
const OpenImage = (event) => {
	event.preventDefault();
	var imagePath = event.target.getAttribute("href")
	document.querySelector("#image-preview").setAttribute("src", imagePath)
	return false
}

✅ Final Result

Your image gallery is now interactive. Clicking any thumbnail updates the large preview image. You can see this live working example here:

👉 Visit Live Preview

🧑‍💻 Final Thoughts

This simple technique can enhance your gallery UI and is great for portfolios, product displays, and photo albums. Keep experimenting and integrating features like modals, sliders, or lightboxes for even more impact.

Happy coding and keep building! 🚀