How can I show a thumbnail on hover using CSS?

To show a thumbnail on hover using CSS, you can utilize the :hover pseudo-class along with some basic positioning and display properties. Here's a breakdown of how to achieve this:

1. HTML Structure:

- You'll need a container element that holds both the main image and the thumbnail. The thumbnail should initially be hidden.

- Example HTML:

<div class="image-container">
  <img src="main-image.jpg" alt="Main Image" class="main-image">
  <img src="thumbnail.jpg" alt="Thumbnail" class="thumbnail">
</div>

2. CSS Styling:

- Initially, hide the thumbnail using display: none; or opacity: 0;. Position it absolutely within the container.

- On hover of the container, display the thumbnail using display: block; or opacity: 1;.

- Example CSS:

.image-container {
  position: relative; / Needed for absolute positioning of the thumbnail /
  display: inline-block; / Or block, depending on your layout /
}
.thumbnail {
  position: absolute; / Position the thumbnail over the main image /
  top: 10px; / Adjust as needed /
  left: 10px; / Adjust as needed /
  display: none; / Initially hide the thumbnail /
  / Or use opacity: 0; for a fade effect /
  / opacity: 0; /
  transition: opacity 0.3s ease; / Optional transition for a smooth effect /
}
.image-container:hover .thumbnail {
  display: block; / Show the thumbnail on hover /
  / Or use opacity: 1; /
  / opacity: 1; /
}

3. Explanation:

- The .image-container is set to position: relative; so that the absolutely positioned thumbnail is contained within it.

- The .thumbnail is initially hidden and positioned absolutely over the main image. You can adjust the top and left properties to position it as desired.

- The :hover pseudo-class on .image-container targets the container when the mouse hovers over it. The nested selector .image-container:hover .thumbnail then targets the thumbnail within that container, changing its display property to block (or opacity to 1) to make it visible.

4. Additional Tips:

- You can add a transition effect to the thumbnail for a smoother appearance using the transition property.

- Adjust the positioning, size, and styling of the thumbnail to fit your design.

By using this approach, you can create an interactive thumbnail effect on hover using only CSS, enhancing the user experience on your website.

Learn more about this