How to add hover effect in collections and hide the word

Shopify Discussion

Topic summary

A user seeks to add a hover effect to collection items that hides text labels by default and displays them on hover. An accompanying image demonstrates the desired effect.

Solutions Provided:

Two support teams offered CSS-based solutions:

  • GemPages team: Recommended adding custom code to the theme.liquid file before the closing </body> tag to control text visibility on hover
  • MandasaTech: Suggested inserting CSS code into the base.css file targeting specific collection slide elements to hide headings by default and display them on hover with centered white text positioning

Resolution:

The user confirmed both solutions worked successfully and expressed appreciation to both support teams. The issue has been resolved with working CSS code implementations.

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

Hi

How to add hover effect in collections and hide the word?

2022-12-12 17 12 00.jpg
2022-12-12 17 12 00.jpg1105×516 39 KB

Like this

Website url: https://hanklee182online.myshopify.com/

Password: teadri

Thank you

2

Hello @HankLee182

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste below code before :

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

1 Like
3

Hello @HankLee182

Go to Online store >> Edit code >> Assets >> base.css
Add this code below of base.css file

#Slide-template--16647805239527__e2a0407b-e487-4896-81c3-dc444181ff76-5 .card__heading {
display: none;
}
#Slide-template--16647805239527__e2a0407b-e487-4896-81c3-dc444181ff76-5 .card:hover .card__heading {
display: block;
}

#Slide-template--16647805239527__e2a0407b-e487-4896-81c3-dc444181ff76-5 .card__heading {
position: absolute;
top: 40%;
width: 100%;
text-align: center;
color: white;
}
1 Like
4

Hi .@GemPages team

I paste the code is working.

Thanks for GemPages team.

Appreciate

5

Hi .@MandasaTech

I paste the code is working.

Thank you very much

1 Like
6

I am glad that my solution is helpful to you.

Best regards,
GemPages Support Team

1 Like
7

Hi [email removed] GemPages team

I’m appreciate GemPages team assist.

Thank you so much :+1:

1 Like