PHPackages                             gabrielgts/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. gabrielgts/module-rollover-image-all-places

ActiveMagento2-module

gabrielgts/module-rollover-image-all-places
===========================================

Magento 2 Hyva compatible module to display alternate product image on hover with lazy loading and fallback support.

1.0.0(today)03↑2900%OSL-3.0PHPPHP ~7.4.0||~8.1.0||~8.2.0||~8.3.0||~8.4.0

Since Jul 30Pushed todayCompare

[ Source](https://github.com/gabrielgts/magento2-product-hover-image)[ Packagist](https://packagist.org/packages/gabrielgts/module-rollover-image-all-places)[ RSS](/packages/gabrielgts-module-rollover-image-all-places/feed)WikiDiscussions main Synced today

READMEChangelog (1)Dependencies (3)Versions (2)Used By (0)

FORK of Ethnic RollOverImage
============================

[](#fork-of-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 gabrielgts/module-rollover-image-all-places

```

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

42

—

FairBetter than 88% of packages

Maintenance100

Actively maintained with recent releases

Popularity4

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

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

0d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/ab1f0030c21bebf4e87187df361e770ffaa2c0d3cdcd0cd45c77a79db5836156?d=identicon)[gtstudio](/maintainers/gtstudio)

---

Top Contributors

[![gabrielgts](https://avatars.githubusercontent.com/u/22245724?v=4)](https://github.com/gabrielgts "gabrielgts (1 commits)")

### Embed Badge

![Health badge](/badges/gabrielgts-module-rollover-image-all-places/health.svg)

```
[![Health](https://phpackages.com/badges/gabrielgts-module-rollover-image-all-places/health.svg)](https://phpackages.com/packages/gabrielgts-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.5M1](/packages/fastly-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)[angeo/module-llms-txt

Magento 2 module for AI Engine Optimization (AEO). Generates spec-compliant llms.txt and llms-full.txt per llmstxt.org standard, plus streaming JSONL for vector indexing. Multi-store, multi-website, CLI, cron, async admin UI, Page Builder-aware sanitization, customer-group pricing, atomic writes, ETag/Cache-Control, .md mirrors.

132.2k](/packages/angeo-module-llms-txt)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)