Image Zoom Hover Effect

This image zoom hover effect creates a gentle zoom-in animation, ideal for galleries, cards, and product images.

HTML

<div class="ss-image">
  <img src="https://via.placeholder.com/300" alt="Image">
</div>

<div class="ss-image">
  <img src="https://via.placeholder.com/300" alt="Image">
</div>

CSS

.ss-image{
  overflow:hidden;
  border-radius:14px;
}

.ss-image img{
  width:100%;
  transition:.4s ease;
}

.ss-image:hover img{
  transform:scale(1.1);
}

.ss-image{
  overflow:hidden;
  border-radius:14px;
}

.ss-image img{
  width:100%;
  transition:.4s ease;
}

.ss-image:hover img{
  transform:scale(1.1);
}

Notes

• Smooth zoom animation
• Gallery-friendly
• Improves engagement

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.