Скачать или смотреть Smooth Image Zoom on Hover Using Pure CSS 🔍✨ | No JavaScript!

Create a smooth image zoom on hover effect using pure CSS — no JavaScript needed! 🔍✨

This effect is perfect for portfolios, galleries, landing pages, or any UI element where you want to add visual engagement. The best part? It's simple and lightweight.

👨‍💻 Built with:
✅ HTML
✅ CSS (transform + transition)

Code -:

body{
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.zoom-container {
overflow: hidden;
width: 600px;
max-width: 100%;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.zoom-container img {
width: 100%;
height: auto;
transition: transform 0.5s ease;
}

.zoom-container:hover img {
transform: scale(1.1);
}

💡 Tip: Adjust the scale value for stronger or softer zoom.

📌 Like, Save, and Subscribe for more HTML & CSS magic every week!

#ImageZoom #CSSOnly #HoverEffect #CSSTricks #WebDesign #FrontendDev #UIAnimation #HTMLCSS #HoverZoom #ZoomEffect #CSSHover #CodeShorts