How to create zoomout in CSS
Agyan adda
<![CDATA[
<!--DOCTYPE html-->
<html lang="en">
<head>
<title>Agyanadda</title>
<style>
#overlay {
border: 1px solid black;
width: 300px;
height: 300px;
display: inline-block;
background-image: url('https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t_Xqk5K2FZodgIFrNtPj2nJoZRc4isfY4RudUHrzKkfjhAS3qHEmGCvq2m-kQViah_hETGNDpYYD2BEEir_9FklOU5gY_Glbwvli81F0MReW088HzK2n9b_NCZhVpcgjks06YzUraRUvZkhzfY8nU-cLTdGMCq4Nd4cnwjzbm65qyYPyqUs5tE=s0-d');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<img height="300px" id="imgZoom" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t_Xqk5K2FZodgIFrNtPj2nJoZRc4isfY4RudUHrzKkfjhAS3qHEmGCvq2m-kQViah_hETGNDpYYD2BEEir_9FklOU5gY_Glbwvli81F0MReW088HzK2n9b_NCZhVpcgjks06YzUraRUvZkhzfY8nU-cLTdGMCq4Nd4cnwjzbm65qyYPyqUs5tE=s0-d" width="300px">
<div id="overlay" onmousemove="zoomIn(event)"></div>
<script>
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";
}
</script>
</body>
</html>
]]>
agyanadda
Author & Editor
Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.
0 $type={blogger}:
Post a Comment