How to Create an Image Zoom Effect on Hover Using CSS?

Zoom Effect on Image on Hover Using CSS

In web development, applying a zoom effect on images upon mouse hover is a common design element. Let's explore a solution using CSS3 transform.

CSS3 Transform for Zoom Effect

The CSS3 transform property and scale() function allow for zooming effects on images. Here's a code snippet:

HTML:

<div class="thumbnail">
    <div class="image">
        <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Image">
    </div>
</div>

CSS:

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

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

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

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

In this example, the image div contains the image. When the image hovers, the image scales up by 1.25 times using the scale() function. The transition property ensures a smooth zoom animation.

Additional Notes

• You can adjust the scale value to achieve the desired zoom level.
• CSS overflow: hidden can be applied to the image div to hide any overflown parts of the scaled image.
• The zoom property is supported by IE but not by other browsers.

Demo

Here's a live demonstration:

<div class="thumbnail">
    <div class="image">
        <img src="/static/imghwm/default1.png" data-src="https://placeimg.com/320/240/nature" class="lazy" alt="Image">
    </div>
</div>

<style>
    .thumbnail {
        width: 320px;
        height: 240px;
    }

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

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

    .image:hover img {
        transform: scale(1.25);
    }
</style>

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