Articles on: Skin

How to Add a Second Image on Hover

This guide walks you through adding a second image on hover effect to your Essential Grid Gallery — a dynamic way to reveal an alternate image when customers hover over a gallery item.



Prerequisites


Before you begin, make sure you have:


  • An active Shopify store with admin access
  • The Essential Grid Gallery app installed from the Shopify App Store
  • At least two sets of images ready (primary images and their hover alternates)





From the Essential Grid Gallery dashboard, click the Create Empty Gallery button.




Enter a descriptive name for your gallery and confirm.



Step 3: Add Images


Click the Add Images button to upload images. You can select multiple images from your media library, then click Choose Image to add them.


[!TIP]
Select all of your primary gallery images at this stage. You'll add the hover images individually in Part 3.




Click the Save Gallery button to save your progress.



Part 2 — Enable Second Image on Hover in Skin Settings


Step 5: Go to the Skin Tab


Navigate to the Skin tab in the gallery editor.



Step 6: Edit the Selected Skin


Click on your currently selected skin, then click the Edit Skin icon to open the skin editor.



Or you can directly edit the skin from the dashboard,




Step 7: Enable Second Image on Hover


In the skin editor, navigate to the Animation tab. Locate the Second Image on Hover option and change it from unchecked to checked to enable the hover effect.




Step 8: Save the Skin


Click the Save Skin button to apply your changes.



Part 3 — Add Custom Hover Images to Individual Items


Step 9: Go Back to Grid Settings


Navigate back to the Grid Settings view of your gallery.



Step 10: Open an Item's Settings


Click the Edit Element icon on the gallery image you want to add a hover effect to.



Step 11: Go to the Item Data Tab


In the item settings panel, navigate to the Item Data tab.



Step 12: Add a Second Image for Hover


Locate the Second Image Mouse Hover option. Click it to open the image picker and select the alternate image that will appear when customers hover over this item.



Step 13: Update and Refresh the Grid


Click the Update and Refresh Grid button to apply the hover image. You should see the hover effect working immediately in the editor.





Step 14: Save Your Changes


Click the Save Gallery button to save your changes.


[!TIP]
Repeat Steps 10–14 for each gallery item you want to add a hover image to. Each item can have its own unique hover image.



Part 4 — Publish & Preview



Go back to the Grid Settings and click the Publish button to make your gallery live.



Step 16: Check the Live Preview


Open the Live Preview to verify the hover effect is working correctly. When you hover over each gallery item, the second image should display smoothly.


Your gallery should now feature:


  • ✅ Primary images displayed by default
  • ✅ Alternate images revealed on mouse hover
  • ✅ Smooth hover transition effect
  • ✅ Individual hover images per gallery item



Troubleshooting


Issue

Solution

Hover image not appearing

Make sure Second Image on Hover is checked in the Skin → Animation tab and the skin is saved.

Hover works in editor but not on storefront

Ensure you clicked the Publish button in Grid Settings to make the gallery live.

Same image showing on hover

Verify you selected a different image in the Item Data → Second Image Mouse Hover field.

Hover effect not smooth

Try a different skin or check the animation settings in the Skin editor for transition options.

Changes not reflecting

Click Update and Refresh Grid, then Save Gallery. Clear your browser cache if needed.

Hover not working on mobile

The hover effect is desktop-only (mouse hover). On touch devices, consider using a tap interaction instead.



Need Help?


If you run into any issues, please contact our support team and include:

  • Your store URL
  • The Gallery ID you're using
  • A screenshot or screen recording of the issue

Updated on: 06/08/2026