Javascript: Zoom in on mouseover WITHOUT Jquery or plugins
This works for me: (Here is a JSFiddle)
#imgZoom {
height: 300;
}
img#imgZoom:hover {
position: relative;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
z-index: 1000;
}
You can also add this for a cool transition effect:
* {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
*Also, you can apply the same logic not only for images, but for divs as well.
you can just do it by playing background-position on mouse-over just moving background-position on mouseover DEMO
function zoomIn(event) {
var element = document.getElementById("overlay");
element.style.display = "inline-block";
var img = document.getElementById("imgZoom");
var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
element.style.backgroundPosition = (-posX * 4) + "px " + (-posY * 4) + "px";
}
function zoomOut() {
var element = document.getElementById("overlay");
element.style.display = "none";
}#overlay {
border: 1px solid black;
width: 200px;
height: 200px;
display: inline-block;
background-image: url('https://via.placeholder.com/400.png');
background-repeat: no-repeat;
}<img id="imgZoom" width="200px" height="200px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="https://via.placeholder.com/200.png">
<div id="overlay" onmousemove="zoomIn(event)"></div>