2nd image on hover on a page

Store Design
, , , ,

Topic summary

A user seeks to implement hover effects on product banners within a specific page, where mousing over displays a different image.

Proposed Solutions:

  • Add CSS code to the theme’s base.css file using .product-banner:hover img { content: url('URL_OF_SECOND_IMAGE'); }
  • Alternatively, insert custom CSS through Shopify’s Theme Customizer under Custom CSS settings
  • Adjust the CSS selector to match the site’s HTML structure

Open Questions:

  • The original poster asks whether the CSS solution will work for multiple banners with different hover images
  • Concerns raised about whether the code would affect all images site-wide rather than just the specific page
  • One responder requested access to the page code to provide more tailored guidance

Status: Discussion remains ongoing with implementation details being clarified. The user has not yet confirmed which approach they’ll use or whether they’ve successfully tested the solutions.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have a page on my website where I have some product banners, I was curious if there is a way to add a hover effect that changes the image to a different one when you mouse over it?

Link to the page for reference - https://briskusa.com/pages/spark-plug-assortment

2

To add a hover effect that changes the image, you can use CSS. In your Shopify admin, go to Online Store > Themes > Actions > Edit code. Open your base.css file under the Assets folder and add this code:

.product-banner:hover img {
    content: url('URL_OF_SECOND_IMAGE');
}

Replace ‘URL_OF_SECOND_IMAGE’ with the link to the image you want to display on hover. Make sure your product banners have a class like product-banner, or adjust the selector to match your site’s structure. Save your changes, and refresh your page to test it out. Let me know if it worked for you, and feel free to mark this as a solution!

1 Like
3

Hi @BriskUSA ,

Is this possible, can you please send me the page code? I will check and guide you.

1 Like
4

Hi @BriskUSA

You can add hover effects by following this instruction:

  1. Go to Shopify > Theme > Customize

  2. Copy and paste this code on Theme settings > Custom CSS section

.plug_img > img:hover {
    content: url("image-link");
}

Here is the result :

LizHoang_0-1733463706515.png
LizHoang_0-1733463706515.png1374×610 244 KB

1 Like
5

Hello,

Where would you like me to send it?

6

Will this work for multiple different images? I’m trying to have a separate hover image for each one of the banners.

Thank you.

7

Will this apply to all images across the entire theme though? I’m trying to narrow it down to that one specific page.

Thank you.