I want to remove a roll-over feature

Store Design
, , , ,

Topic summary

A user wants to remove the product overlay that appears on hover in their Shopify theme’s lookbook feature while keeping the heading and description text visible on images.

Initial Solution:
Two community members provided CSS code to hide the product card overlay. One solution successfully removed the hover effect by adding CSS targeting .lookbook-product-card-box .product-card with display: none.

Current Issue:
The user reports the CSS solution is affecting hover functionality on other product features beyond just the lookbook section. They need the code to target only the lookbook area without impacting featured products elsewhere on the site.

Status:
The discussion remains open as the helper is requesting to review the implementation to provide a more targeted solution that isolates the lookbook section.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello!

There’s a built in “lookbook” feature I like on my theme, with a side scroll. However, there’s also a product overlay I wish to remove when you hover over the image tile. I would like to only have the image with “Heading” and “Description” text overlay on the image. Is this an easy fix?

The lookbook feature is currently on the bottom area of the landing page:

site: https://w4u65apa39ge9g0x-8134245.shopifypreview.com

Thanks!

This is what I want:

Screenshot 2025-04-23 at 9.01.38 AM.png
Screenshot 2025-04-23 at 9.01.38 AM.png3396×1838 305 KB

But I don’t want the roll over product thing to appear:

Screenshot 2025-04-23 at 8.58.18 AM.png
Screenshot 2025-04-23 at 8.58.18 AM.png3432×1970 567 KB

2 Likes
2

Hi

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

3

Hi @JayKay89

Yes, we can hide the product card on hover. The heading will remain visible when not hovering, but it will be hidden when you hover over it. If its that okay, you can check the code below.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.lookbook-product-card-box .product-card.card-wrapper.js-color-swatches-wrapper.quickview {
     display: none;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

Thanks so much! This worked.

5

Welcome, Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

The effect doesn’t happen on hover; it appears when you scroll. As you scroll up or down, the next and previous images appear.

6

The problem I’ve having with this solution is that it disables the hover over function in the other product features? Is there any way I can just remove the rollover from the lookbook only and not the featured products?

7

Did you already use the code? Can I check it again without the code? The code I provided is only for the lookbook.