Problem description

Given an HTML page with a <div class="image-container"> wrapping an <img class="zoom-img" src="path/to/image.jpg" alt="Sample Image">, write CSS to:

• Ensure the container hides any overflow.

• Set the image to transition smoothly on transform changes.

• Scale the image to 1.2 its original size when hovered.

Goal

Write CSS rules to animate a zoom-in effect on the image when the user hovers over it.

Constraints

• Use only CSS (no JavaScript).

• Container must use overflow: hidden.

• Transition duration should be 0.3s with ease-in-out timing.

• Scale factor on hover should be 1.2.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.