Zoom on hover

The Zoom on Hover module transforms standard Drupal image fields into a high-performance, interactive viewing experience for Drupal 10 and 11. Unlike older solutions, it is powered entirely by a custom JavaScript engine with zero third-party library dependencies (no jQuery, no xzoom.js). This ensures a lightweight footprint, lightning-fast load times, and maximum compatibility with modern decoupled or traditional Drupal themes.

Key Features

• Custom JS Engine: Built from the ground up with vanilla JavaScript for superior performance and zero dependency overhead.
• Scroll-to-Zoom: Interactive magnification control using the mouse wheel, supporting levels from 1× to 10×.
• Native Touch Support: Smooth, flick-free zooming for mobile and tablet users via native touch-move event handling.
• Click to Fullscreen: An optional built-in lightbox overlay featuring hardware-accelerated CSS animations.
• GPU-Optimized: Utilizes translate3d and will-change CSS properties to ensure a consistent 60 fps rendering experience.

Installation

Install the module via Composer to ensure the codebase is properly structured within your Drupal project:

composer require drupal/zoom_on_hover

Enable the module using Drush:

drush en zoom_on_hover -y

Configuration

The module provides a field formatter that can be applied to any standard Image field:

1. Navigate to Structure » Content types » [Your Type] » Manage display.
2. Locate your image field and change the Formatter to Zoom on Hover.
3. Click the gear icon on the right to configure the zoom mode, lens dimensions, and animation speeds.
4. Save the display settings.

Zoom Modes

Choose the visual style that best fits your site's aesthetic:

• Box: Displays an external preview panel beside the thumbnail. A tracking lens follows the cursor on the original image.
• Circle: A classic circular magnifying glass effect overlaid on the image with a subtle darkened background.
• Inside: A rectangular magnifier lens that reveals the zoomed-in details directly within the lens boundaries.
• Background: The image pans and scales fluidly in-place within its own container—no extra panels or lenses required.

Requirements & Compatibility

• Drupal: 10.0+ or 11.0+.
• Browser Support: Modern evergreen browsers (Chrome, Firefox, Safari, Edge).
• Zero External Libraries: No manual downloading of JS files to the /libraries/ folder is required.

Upgrading from Legacy Versions

Previous versions of this module relied on xzoom.js. The current version removes this dependency to modernise the stack.

CSS Notice: If your theme contains custom CSS overrides for .xzoom, .xzoom-container, or .xzoom-preview, please update your selectors to .zoom-image, .zoom-container, and .zoom-preview respectively.

Similar Projects

• Image Zoom (Basic hover magnification using jQuery)
• Elevate Image Zoom (Requires external elevatezoom library)
• Magnify Images (Lightweight alternative for simple use cases)

Support & Contribution

If you find a bug or have a suggestion for a new feature, please submit an issue in the official queue. Contributions via Merge Requests are highly encouraged!