How can I change product images with CSS on hover?

[RubyandSaige]

Hello Shopify community!

I would like to add some CSS to allow the product image to change to the second allocated image when a user hovers over it on my homepage.

My website is https://rubyandsaige.com/

Can anyone help?

Thanks!

[layoutbase]

Hi @RubyandSaige , it’s Layoutbase here.

We would like to provide you with our thoughts on your question.

Since your store uses the slider to show images, if you would like to hover on each item to show the second image, you need to reorganize your HTML(by updating the liquid file). With the current structure of HTML, you can’t do it.

Hope you find our suggestion helpful.

Best regards,

Layoutbase

Please let us know if you find it helpful by giving us a LIKE and Mark as Solution.

Layoutbase is a leading Shopify page builder. Give us a try HERE!

[RubyandSaige]

How can i swap from the sliders to the hover? Thanks!

[layoutbase]

Hi @RubyandSaige ,

Noticed your store used the PageFly app. So you can update the setting of the app. Please refer to the screenshot below.

If you didn’t have used an app. Pls follow step by step below( need a developer to do it):

1. Go to Online Store → Theme → Edit code
2. Find in Snippets/cart-product.liquid or Snippets/product-card-grid.liquid or find the file that contains the code the show card product.
3. Replace the code to show media with the code below

{%- if card_product.featured_media -%}
  
    

      

      {%- if card_product.media[1] != nil-%}
        
      {%- endif -%}
    

  

{%- endif -%}

4. Go to Assets/theme.css file → Pastes the below code at the bottom of the file.

.media--hover-effect {
  position: relative;
    
}
.media--hover-effect .hover-image {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	object-fit: cover;
	z-index: 2;
}
.media--hover-effect:hover .hover-image {
	opacity: 1;
}

Hope you find our suggestion helpful.

Best regards,

Layoutbase

Please let us know if you find it helpful by giving us a LIKE and Mark as Solution.

Layoutbase is a leading Shopify page builder. Give us a try HERE!

[PageFly-Victor]

Hi @RubyandSaige ,

This is PageFly - Free Landing Page Builder. Thank you for choosing PageFly to build and improve your store.

That’s true of Layoutbase’s suggestion. In PageFly, we have a feature that helps you show the second product image when you hover over it. Please click here to choose “Media Hover Action”:

Media hover action will NOT work with Video, 3D Model and touch-based devices like tablets or smartphones.

If you can’t find it, feel free to chat with our Live chat support 24/7. We are always there to help customers solve problems on PageFly.

Besides, even though your page is so pretty and elegant, you can still improve it, such as having a sticky header, testimonial sections/review app, brand story section… I found this blog for you: Personalize Your Homepage . May it help!

Good luck and have a nice day! Cheers!