How can I animate my image banners to zoom in and out?

Store Design
,

Topic summary

A user seeks to implement a zoom in/out animation effect for image banners, similar to an example website they referenced.

Proposed Solution:

  • Use CSS and JavaScript to create the animation effect
  • Structure HTML with <div> or <figure> elements wrapping the images

CSS Implementation:

  • Apply position: relative and overflow: hidden to the banner container
  • Use transform, transition, and scale properties to create the zoom effect
  • Add a hover state with transform: scale(1.2) to increase the image size
  • Set transition: transform 0.5s for smooth animation

The discussion appears to be ongoing, with one technical response provided but the solution not yet fully implemented or confirmed by the original poster.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hello

i want to animate my image banners to “zoomed in/out” once appear like in this website:

https://www.kerenbartov.co.il/

how can I do that?

this is my website:

https://faceclub-il.com/

thanks!

2

To animate your image banners with a “zoomed in/out” effect similar to the website you referenced, you can use CSS and JavaScript. Here’s an outline of the steps you can follow:

  1. Prepare the HTML structure for your image banners. This could involve using <div> or <figure> elements to wrap the image.

  2. Apply CSS styles to position and style the image banners. Set the initial size and position of the image to create the zoom effect. You can use CSS properties like transform, transition, and scale to achieve the desired effect. Here’s an example CSS code snippet:

.image-banner {
  position: relative;
  overflow: hidden;
}

.image-banner img {
  transition: transform 0.5s;
}

.image-banner:hover img {
  transform: scale(1.2); /* Increase the scale for a zoomed-in effect */
}