Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Lower image opacity on hover on collection page

Lower image opacity on hover on collection page

smef
Excursionist
32 0 4

Hi there. I wanted to make my website's images lower opacity/lighten as a hover effect like is present here: https://earftones.com/

 

This is my website: https://smef.us/

 

I'd also like to make the product titles not appear on the main collection page like the top website.


Thanks!

Replies 2 (2)
smef
Excursionist
32 0 4

okay yeah can you

Dan-From-Ryviu
Shopify Partner
10939 2148 2286

Hi @smef 

You can add this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

.card-wrapper:hover .card__inner {
    opacity: .8;
}

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.