roofio Posted December 11, 2020 Share Posted December 11, 2020 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! Link to comment
tuanphan Posted December 13, 2020 Share Posted December 13, 2020 Hi. Have you solved this yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
roofio Posted December 13, 2020 Author Share Posted December 13, 2020 Hello tuanphan, unfortunately I have not managed to solve it yet. Any ideas how I could go about it? 😀 Link to comment
tuanphan Posted December 15, 2020 Share Posted December 15, 2020 The url doesn't exist. Can you check again? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
roofio Posted December 16, 2020 Author Share Posted December 16, 2020 My apologies. The correct link is: kommood.store/kollektionen Link to comment
roofio Posted December 22, 2020 Author Share Posted December 22, 2020 @tuanphan I still haven’t managed to figure it out. Do you think you could take a look? 🙂 Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.