Fade in background picture in the "page title header" of the shop

Hello,

It’s not a problem-related topic but more a little customisation question here:

Would you know how can I make the pictures displaying in the page-title zone for each category to be fade in? That would render nice I think.

(My lazy loading is activated but does not work on those specific images)

Best regards

Hello,

1) As the title background images of product categories already contains fade-in opacity level, so if you want fade-In on hover then we have to first set styling for fade-out so when someone hover over the image it shown as fade-In otherwise it remains fade-out for this purpose you can use the below CSS code in Theme Settings >> Custom CSS >> global custom CSS:

.tax-product_cat .page-title-default {
opacity: 0.6;
}
.tax-product_cat .page-title-default {
opacity: 1;
}

Result: https://jmp.sh/S5UoGkq

2) Lazy loading is not for specific images it affects all the images on scrolling down.

Best Regards.

[Author]

Posts