How Can I Create an Image Zoom Effect on Hover Using Only CSS3 Transform?

CSS Image Zoom Effect on Hover with CSS3 Transform

Creating a hover effect that zooms into an image can be achieved effortlessly using CSS3's transform property. This approach requires minimal code and provides a sleek visual enhancement without the need for complex tables or mask divs.

Implementation

To create the zoom effect, follow these steps:

1. HTML: Place the image inside a container element.

<div class="thumbnail">
    <div class="image">
        <img src="image.jpg" alt="Your image">
    </div>
</div>

2. CSS: Apply the CSS styles to control the image zoom.

.thumbnail {
    width: 320px;
    height: 240px;
}

.image {
    width: 100%;
    height: 100%;
}

.image img {
    transition: all 1s ease;
}

.image:hover img {
    transform: scale(1.25);
}

• The transition property defines the duration and easing function of the scaling effect.
• The transform: scale() property scales the image when the cursor hovers over the container.

Example

See the following example fiddle: https://jsfiddle.net/rkd3x4uc/

Note:

• The zoom property, which directly applies zoom to an image, is only supported in Internet Explorer. The transform: scale() property is preferred for cross-browser compatibility.
• To constrain the scaled image within the container's bounds, you can add overflow: hidden to the .image class.

The above is the detailed content of How Can I Create an Image Zoom Effect on Hover Using Only CSS3 Transform?. For more information, please follow other related articles on the PHP Chinese website!