Making a background image go from grayscale to colorised on hover (rollover effect)

Site URL: https://www.kommood.store/collections

Hi there,

I've been trying to create a rollover effect for the two background images that are used on the "collections" page. I want them to turn from grayscale to their original color on hover. I also want this effect only on the collections page. I have tried the following code in the 'custom css' section (i'm a css noob so excuse the messy code):

//Greyscale to color hover//
#collection-5fc7c286efc65c5b7a4f8e58 {
	.section-background img {
  		//transition: filter .5s ease-in-out;
		filter: grayscale(100%) !important;
  	}
  
  .section-background img:hover { filter: none;}
}

I've noticed that the code seems to somehow interfere with parts of the parallax code that I copied off of someone else. Said part of the code is injected into the footer:

<script> 
  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src') + '?format=2500w';
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .5,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
}; 
</script>

pw: friendsandfamily

Any help would be greatly appreciated!

Hi. Have you solved this yet?

Hello tuanphan,

unfortunately I have not managed to solve it yet. Any ideas how I could go about it? 😀

The url doesn't exist. Can you check again?

My apologies. The correct link is:

kommood.store/kollektionen

@tuanphan I still haven’t managed to figure it out. Do you think you could take a look? 🙂