Dynamic Background Change Effect

Table of Contents

Live Demo
Technologies used -
HTML
CSS
JavaScript
Description

This interactive background change effect creates a dynamic user experience by revealing an image in sync with mouse movement. As the user hovers over the image area, the background changes seamlessly, giving a before-and-after effect. This setup is perfect for showcasing transformations, such as “before and after” images, or enhancing visual content with an interactive layer. The design relies on an overlay structure, where a transparent layer is progressively revealed based on the mouse position.

This effect is implemented with a combination of HTML, CSS, and JavaScript. The HTML structure provides a flexible layout, CSS controls the visuals and responsiveness, and JavaScript calculates the mouse position in real-time to dynamically alter the width of the overlaid image, creating the illusion of a gradual reveal. The effect is smooth and visually captivating, ideal for projects that need to emphasize visual transitions or showcase changes.

Highlighted Source Code
				
					var imgBox = document.querySelector(".img-box")
var imgWrap = document.querySelector(".img-wrap")
var leftSpace = imgBox.offsetLeft;
var oroginalImg = document.getElementById("oroginalImg");
var line = document.getElementById("line");

oroginalImg.style.width = imgBox.offsetWidth + "px";

imgBox.onmousemove = function (e) {
    var boxWidth = (e.pageX - leftSpace) + "px";
    imgWrap.style.width = boxWidth;
    line.style.left = boxWidth
}

Recent Projects

Follow me

Github Linkedin Instagram

Related Projects
Fun Project

Tic Tac Toe Game

The Interactive Tic Tac Toe Game is a classic two-player game implemented using HTML, CSS, and JavaScript. This engaging application

Read More »
Type to search