Mouse Hover Image Change Code Generator

How to change an image on mouse hover using HTML, CSS, and JavaScript. Includes simple image swap, hover effects, and beginner friendly code examples.

Contents

Generate Mouse Hover Swap Image Code
CSS hover swap two image tag
JavaScript Reusable Image Hover Swap

HTML Image Hover Swap

The code shown below is an example of changing the SRC link of the current image when the mouse hover over the image. In the code below you need to add a new image SRC URL to the mouseover and mouseout attribute.

HTML

<img src="/images/default-image.png"
    onmouseover="this.src='/images/hover-image.png'"
    onmouseout="this.src='/images/default-image.png'"
    alt="hover image"
    width="200px">

Run code Try it yourself

Generate Mouse Hover Swap Image Code

This tool creates optimized snippets that you can copy and paste directly into your project. Includes automatic image preloading for flicker free hover transitions.

Add the image link in the below input box or upload image and click the copy code button.

Enter image URL
Enter hover image URL
Set image width and height
Copy the code

Image URL :

Hover Image :

Image Alt Title :

Preview, Hover the mouse over the image

Set image size

Size:

Width:

Height:

Choose the type of code you want to use to change the image on hover: HTML inline code, HTML & CSS only, or JavaScript.

HTML and JavaScript code, Copy and paste it your webpage

HTML Inline CodeCSS CodeJavaScript CodeJavaScript Reusable Code

HTML

<img src="/images/hcg/HTML.png"
	onmouseover="this.src='/images/hcg/CSS.png'"
	onmouseout="this.src='/images/hcg/HTML.png'"
	alt="HTML CSS"
	style="width:200px;">

<script>
 // load second image for smooth transition
(() => {
	(new Image).src = "/images/hcg/CSS.png";
})();
</script>

Run code Try it yourself

CSS Hover Swap Using Two <img> Tags

This technique uses pure CSS to layer two images. The "hover" state uses opacity transitions for a smooth cross fade effect. No JavaScript is required.

How It Works

Two <img> elements are placed inside the same wrapper.
The top image (.hover-img) is hidden using opacity: 0.
When hovered, CSS transitions the hover image to full opacity.
he effect is smooth and works without any JavaScript.

HTML

<div class="img-hover-wrap">
  <img src="/images/hcg/HTML.png" alt="Normal Image">
  <img src="/images/hcg/css.png" class="hover-img" alt="Hover Image">
</div>

<div class="img-hover-wrap">
  <img src="/images/hcg/css.png" alt="Normal Image">
  <img src="/images/hcg/HTML.png" class="hover-img" alt="Hover Image">
</div>

CSS

.img-hover-wrap {
    position: relative;
    display: inline-block;
}

.img-hover-wrap img {
    display: block;
    width: 200px;
    height: auto;
    transition: opacity 0.3s ease;
}

/* Hover image positioned above */
.img-hover-wrap img.hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/* Show hover image on mouseover */
.img-hover-wrap:hover img.hover-img {
    opacity: 1;
}

Run code Try it yourself

JavaScript Reusable Image Hover Swap

This script finds all elements with the class .hover-swap and automatically sets up the preloading and event listeners for each one individually.

If you need to change an image filename, you only edit the HTML. You don't need to edit your JavaScript files.

It still preloads the images so the user doesn't see a "flash" of empty space the first time they hover.

HTML

<img class="hover-swap"
     src="/images/hcg/HTML.png"
     data-hover="/images/hcg/css.png"
     alt="" style="width:200px;">

<img class="hover-swap"
     src="/images/hcg/css.png"
     data-hover="/images/hcg/HTML.png"
     alt="" style="width:200px;">

JavaScript

(() => {
    // Select all images that will use hover swapping
    const images = document.querySelectorAll(".hover-swap");

    images.forEach(img => {
        const originalSrc = img.src;
        const hoverSrc = img.dataset.hover;

        // Skip if no hover image is provided
        if (!hoverSrc) return;

        // Preload hover image for smooth swapping
        new Image().src = hoverSrc;

        // Swap image on hover
        img.addEventListener("mouseenter", () => {
            img.src = hoverSrc;
        });

        // Restore original image
        img.addEventListener("mouseleave", () => {
            img.src = originalSrc;
        });
    });
})();

Run code Try it yourself

Report Problem