First

PraweenSoni · Sep 7, 2024 · 1395ebf · 1395ebf
commit 1395ebf
Showing 1 changed file with 71 additions and 0 deletions.
diff --git a/IMG Zoom Effect.html b/IMG Zoom Effect.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Zoom Effect!</title>
+    <style>
+        body{
+            height: 100vh;
+            display: grid;
+            place-items: center;
+            background: #363942;
+        }
+        .zoom{
+            position: relative;
+            /* width: min(800px, 90vw);
+            height: 90vmin; */
+            width: 600px;
+            height: 400px;
+            border: 6px solid white;
+            /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); */
+            box-shadow: -1px 5px 15px #000;
+            overflow: hidden;
+            /* cursor: zoom-in; */
+        }
+        .zoom-img{
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            -o-object-fit: cover;
+            object-fit: cover;
+            /* top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(1); */
+            transform: scale(var(--zoom, 1));
+            transform-origin: var(--x) var(--y);
+            transition: transform 0.3s ease;
+            display: block;
+        }
+        .zoom:hover{
+            --zoom: 2;
+        }
+    </style>
+</head>
+<body>
+    <main class="zoom">
+        <img src="./Animation on scroll/OIP.jpg" alt="" class="zoom-img">
+    </main>
+    <script>
+        document.querySelectorAll('.zoom').forEach(elem => {
+            let x, y, width, height;
+
+            elem.onmouseenter = (e) => {
+                const size = elem.getBoundingClientRect();
+                x = size.x;
+                y = size.y;
+                width = size.width;
+                height = size.height;
+            };
+
+            elem.onmousemove = (e) => {
+                const horizontal = ((e.clientX - x) / width) * 100;
+                const vertical = ((e.clientY - y) / height) * 100;
+                elem.style.setProperty('--x', horizontal + '%');
+                elem.style.setProperty('--y', vertical + '%');
+            };
+        });
+    </script>
+</body>
+
+</html>