Image Zoom on Hover

Wanted: When a mouse hovers over an image, the entire image becomes larger.

This article describes how to do an image zoom. It uses CSS. But no JavaScript.

Also of note is that this is a hover effect. That means a mouse pointer must be available to hover over the image. Generally, multimedia phones and tablets don't have a mouse pointer.

Here is a demonstration with the Willmaster logo. Hover your mouse over the logo, and the image will zoom into a larger size.

First, let's provide the CSS. Then you'll be able to use the CSS for any image on the web page.

<style type="text/css">
#image-zoom { transition: transform ease-in-out 0.7s; }
#image-zoom:hover { transform: scale(1.5); }
</style>

The 0.7s may be updated to the number of seconds that should elapse while the image is zoomed in or zoomed out.

The 1.5 may be updated to the zoom-in size that the image should zoom to.

You may, of course, change the class name (image-zoom). Every image using the class would then need to be updated accordingly.

With the CSS in place, any image tag can be given the id="image-zoom" attribute so it has the zoom feature.

Here is the image tag for the above example.

<img id="image-zoom" style="max-width:100%;" src="https://www.willmaster.com/images/wmlogo_icon.gif">

I think you'll find the zoom image relatively easy to implement.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager