Boundless: Product image fading too much on product selection page

Hi I hope someone can help with this…

I have an online image gallery.

It is in two sections FOTO & GRAFIK

When either is clicked it takes the visitor to a collection contents page with large thumbnails to select the image for purchase.

When the cursor hovers over the image it fades to almost white and the image almost disappears.

It is OK on the landing page / home page the fading is only slight and I can live with that.

https://www.peterdurant.art/

But on the GRAFIK and FOTO selections page the images almost disappear.

https://www.peterdurant.art/collections/foto

https://www.peterdurant.art/collections/grafik

I want to turn the fade element down to only say 95% opacity… a very slight fade (it appears to be a 5% at the moment)

This problem is only on the main computer screen, mobile viewing is OK

How do I do this?

Thanks

Hi @arcpd .

I am Richard Nguyen from PageFly - Advanced Page Builder.

Yo can go to Onilne store => themes => Actions => edit code => theme.scss.css

.product-item__link:hover .product-item__image {
   opacity: .9 !important;
}

Hope this helps.

Best regards,

Richard - PageFly

1 Like

Thank you appreciated … unable to find ‘theme.scss.css’ BUT I can find ‘theme.scss.liquid’

Will that work?

Hi Richard I copy and pasted and it works!!! Such a relief.

The final code at the end of that section (before I pasted in your code) is

@media only screen and (min-width: 767px) {
.product-item__meta .product-item__meta__inner,.product-item__meta{position: relative;}
.product-item__meta{opacity: 1;}

Could this relate to the original issue … I see it referres to ‘opacity: 1’ .. Yes I am not a coder just a copy paster If I changed that 1 to a 9 would that have addressed the issue..? (Just curious)