Jump to content

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

Recommended Posts

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:

  $('.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);
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .5,
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
    }, 100)

pw: friendsandfamily

Any help would be greatly appreciated!

Link to comment
  • Replies 5
  • Views 1.7k
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.