Jinsi ya Kutengeneza Interactive Image Zoom on Hover kwa CSS na JavaScript

Interactive image zoom on hover inarahisisha watumiaji kuona maelezo ya picha kwa undani wakati wanapobeba mouse juu ya image. Hii inafaa kwa product galleries, portfolios, au blogs ili kuongeza user experience.

Hatua kwa Hatua
1️⃣ HTML Structure
<div class="image-container">
<img src="https://via.placeholder.com/300&quot; alt="Sample Image">
</div>

2️⃣ CSS kwa Zoom Effect
.image-container {
width: 300px;
height: 200px;
overflow: hidden;
border: 2px solid #3498db;
border-radius: 8px;
cursor: zoom-in;
}

.image-container img {
width: 100%;
height: 100%;
transition: transform 0.3s ease;
}

.image-container:hover img {
transform: scale(1.5); /* Zoom in */
}

Hapa transition inasababisha zoom kuwa smooth, na scale(1.5) inapanua image 1.5x juu ya original size.

3️⃣ Advanced Zoom na Mouse Position (Optional JavaScript)
const container = document.querySelector(".image-container");
const img = container.querySelector("img");

container.addEventListener("mousemove", (e) => {
const rect = container.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
img.style.transformOrigin = `${x}% ${y}%`;
});

container.addEventListener("mouseleave", () => {
img.style.transformOrigin = "center center";
});

Hii inasababisha zoom kufuata mouse position, ikitoa interactive experience zaidi.

4️⃣ Faida za Interactive Image Zoom

Inaboresha user experience kwa galleries na portfolios.

Hufanya website inavutie na interactive bila JavaScript nyingi.

Inafaa kwa e-commerce products, blogs, au portfolio previews.

Rahisi ku-customize: size ya zoom, transition speed, au radius ya image.

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website: https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo): https://www.faulink.com/excel_mifumo.php

📲 Piga / WhatsApp kwa msaada wa haraka: https://wa.me/255693118509