Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

🗙
Login
Register

Create Account

Cancel
Back to Images Effects
Preview Source Code
Download
HTML
CSS
#zoomimg {
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
    height: 400px;
    width: 600px;
    overflow: hidden;
}
img {
    transform-origin: center center;
    object-fit: cover;
    height: 100%;
    width: 100%;
}
JS
const container = document.getElementById("zoomimg");
	const img = document.querySelector("#zoomimg img");
	container.addEventListener("mousemove", onZoom);
	container.addEventListener("mouseover", onZoom);
	container.addEventListener("mouseleave", offZoom);
	function onZoom(e) {
	    const x = e.clientX - e.target.offsetLeft;
	    const y = e.clientY - e.target.offsetTop;
	    img.style.transformOrigin = `${x}px ${y}px`;
	    img.style.transform = "scale(2.5)";
	}
	function offZoom(e) {
	    img.style.transformOrigin = `center center`;
	    img.style.transform = "scale(1)";
	}

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *