> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://essential-grid.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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)

---

## Part 1 — Create a Gallery & Add Images

### Step 1: Create an Empty Gallery

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

---

### Step 2: Name Your Gallery

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.

---

### Step 4: Save the Gallery

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.


![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_uh7l92.png =450x602)
Or you can directly edit the skin from the dashboard,


![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1km6znm.png =800x124)
---

### 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.


![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_19gin7m.png =600x366)
---

### 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1eeo55.png =800x481)


---

### 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

### Step 15: Publish the Gallery

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