PHPackages niraligajera/module-rollover-image-all-places - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Image & Media](/categories/media) 4. / 5. niraligajera/module-rollover-image-all-places ActiveMagento2-module[Image & Media](/categories/media) niraligajera/module-rollover-image-all-places ============================================= Magento 2 Hyva compatible module to display alternate product image on hover with lazy loading and fallback support. 749PHP Since Apr 15Pushed 3mo ago1 watchersCompare [ Source](https://github.com/niraligajera/magento2-product-hover-image)[ Packagist](https://packagist.org/packages/niraligajera/module-rollover-image-all-places)[ RSS](/packages/niraligajera-module-rollover-image-all-places/feed)WikiDiscussions main Synced 3w ago READMEChangelogDependencies (3)Versions (2)Used By (0) Ethnic RollOverImage ==================== [](#ethnic-rolloverimage) Magento 2 Hover Image Module for Hyvä Theme Product RollOver Image functionality for category, search, upsell, cross-sell, and homepage. This module adds a hover (roll-over) image functionality for Magento 2 stores using the Hyvä theme. When a customer hovers over a product image, a secondary image is displayed, improving product visibility and user experience. A highly performant Magento 2 module that seamlessly changes the product image when a user hovers over it. Designed to work flawlessly across traditional Luma, Hyvä Themes, and Headless PWA deployments with true zero-config operation. Features -------- [](#features) - **Auto Image Fetch**: Automatically use the **2nd Image** from the product's image gallery as the hover image. No manual role assignment needed! - **Custom Image Option**: Automatically creates an administrative "Hover / RollOver Image" gallery role to deliberately define exactly what image triggers. - **Hyvä Compatible**: Automatically detects Hyvä Themes and runs natively utilizing Alpine.js crossfade transitions avoiding any Knockout JS rendering latency. - **Selective Rendering**: Admin configuration lets you determine exactly which site areas evaluate the hover effect (Category pages, Grid vs List, Search pages, Related Products, Upsells). - **Animation Controls**: Customize fade transition opacity intervals seamlessly from 0.2 to 2.0 seconds utilizing CSS logic. - **Fast & Lazy Load**: Native implementation of Alpine's `x-intersect` automatically guarantees hover images are *never* loaded until the user scrolls past them, defending top-tier Core Web Vitals. - **Mobile Responsive**: Built-in Javascript hardware detection dynamically disables functionality on touch environments. GraphQL & PWA Studio Support -------------------------------- [](#graphql--pwa-studio-support) For modern Headless operations (PWA Studio, VueStorefront), backend logic is natively extended into the GraphQL schema! The PWA resolves URLs rapidly and cleanly bypassing typical logic extraction processes. **GraphQL Example:** ``` query GetCategoryProducts { products( filter: { category_id: { eq: "id" } } pageSize: 10 currentPage: 1 sort: { position: ASC } ) { total_count items { name sku ethnic_rollover_image small_image { url label } } } ethnicRolloverConfig { enabled animation animation_duration lazy_load image_role enabled_sections } } ``` Installation ------------ [](#installation) ✅ Via Composer (Recommended) ``` composer require niraligajera/module-rollover-image-all-places ``` ### Luma & Hyvä Installation [](#luma--hyvä-installation) 1. Download the core module into `app/code/Ethnic/RollOverImage` or install via composer. 2. Run Magento's CLI integration: ``` bin/magento module:enable Ethnic_RollOverImage bin/magento setup:upgrade bin/magento setup:di:compile bin/magento cache:flush ``` Usage Settings -------------- [](#usage-settings) 1. Traverse to the Admin Panel: **Stores > Configuration > Ethnic > RollOver Image**. 2. Determine Global constraints via **Enable RollOver Image**. 3. also allow to set default product image position . Like if you want to set second image on hover you can set Also you can set ad image label Target an **Image Role**: - `Use 2nd Gallery Image`: Engages Zero-Setup fallback mode. - `Hover / RollOver Image`: Targeted user uploads. 4. Dictate active sectors under **Enabled Sections**. 5. Save configuration and flush the block cache. Technical Requirements ---------------------- [](#technical-requirements) - Magento Open Source / Commerce 2.4.X - PHP 7.4 / 8.1 / 8.2 / 8.3 / 8.4 Compatible 🧠 Frontend Behavior ------------------- [](#-frontend-behavior) On hover → hover image is shown On mouse leave → main image is restored Fallback Logic If no hover image is assigned: Uses main image OR Optionally can use second gallery image 📊 Bulk Upload (CSV) You can import hover images using Magento import. Sample CSV Format: ------------------ [](#sample-csv-format) sku hover\_image ABC123 /h/o/hover1.jpg XYZ456 /h/o/hover2.jpg 🎨 Styling Basic CSS example: ------------------ [](#basic-css-example) .product-image { position: relative; } .product-image .hover-img { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.3s ease; } .product-image:hover .hover-img { opacity: 1; } ⚡ Hyvä Compatibility -------------------- [](#-hyvä-compatibility) Built using Hyvä best practices No heavy JavaScript Compatible with Alpine.js if needed ❓ FAQ. ------ [](#-faq) 1. What if no hover image is set? Fallback will show the main product image (no break in UI). 2. Does it work on mobile? Hover is not applicable on mobile. Can be extended to tap behavior if required. ⏱️ Estimated Performance Impact ------------------------------- [](#️-estimated-performance-impact) Minimal – uses CSS-based hover, no extra API calls. 🧩 Future Improvements --------------------- [](#-future-improvements) Admin preview of hover image Auto-pick second gallery image Animation effects (zoom / slide) PWA support 👨‍💻 Author Magento 2 Developer ------------------- [](#magento-2-developer) Hyvä | Performance | Custom Modules 📄 License OSL-3.0 / AFL-3.0 ### Health Score 23 — LowBetter than 25% of packages Maintenance54 Moderate activity, may be stable Popularity17 Limited adoption so far Community4 Small or concentrated contributor base Maturity14 Early-stage or recently created project How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 100d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/40377457?v=4)[Nirali](/maintainers/niraligajera)[@niraligajera](https://github.com/niraligajera) ### Embed Badge ![Health badge](/badges/niraligajera-module-rollover-image-all-places/health.svg) ``` [![Health](https://phpackages.com/badges/niraligajera-module-rollover-image-all-places/health.svg)](https://phpackages.com/packages/niraligajera-module-rollover-image-all-places) ``` ### Alternatives [mollie/magento2 Mollie Payment Module for Magento 2 1131.9M16](/packages/mollie-magento2)[fastly/magento2 Fastly CDN Module for Magento 2.4.x 1564.4M1](/packages/fastly-magento2)[run-as-root/magento2-prometheus-exporter Magento2 Prometheus Exporter 68357.9k](/packages/run-as-root-magento2-prometheus-exporter)[buckaroo/magento2 Buckaroo Magento 2 extension 32420.3k8](/packages/buckaroo-magento2)[loki/magento2-components Core module for defining Alpine.js components with advanced AJAX features 1011.8k26](/packages/loki-magento2-components)[mage-os/module-inventory-reservations-grid Add a grid with the list of inventory reservations. 1615.9k](/packages/mage-os-module-inventory-reservations-grid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)