How to Create a CSS Zoom Effect on Hover Without Tables or Masks?

CSS Zoom Effect on Hover Using Transform

Question:

How can I create a zoom effect on mouse hover on a HTML image without using tables or mask divs?

Answer:

Using the Transform Property with Scale

Consider utilizing CSS3's transform property to achieve a zoom-like effect using scale. Here's how:

HTML:

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

CSS:

.thumbnail {
    width: desired-width;
    height: desired-height;
}

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

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

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

Demo Explanation:

• The scale() value indicates the multiplier for the image's original size, resulting in a 25% zoom effect.
• The transition property specifies the smooth transition of the zoom effect.
• This approach avoids using additional elements or CSS tricks, making it a simple and efficient way to achieve the desired zoom effect.

The above is the detailed content of How to Create a CSS Zoom Effect on Hover Without Tables or Masks?. For more information, please follow other related articles on the PHP Chinese website!