Dynamic Hover with JS

[smallio (Will Small)]

Hey!

I’m trying to write a short piece of code that turns greyscale off on each image as you hover.

I’d imagine the code just needs to know what image it’s hovering on and to turn greyscale off for that particular image.

$("#imageHolder").hover(function(){
$('#imageHolder').toggleClass('grayscale-off');
});

The code above works on the top left tile but I’d have to copy it for each one. Is there a way write this so It knows the above info?

The tiles are on the main page (I’ve turned off the intro loader so wait 4s or so for the tiles to come in)

Live Site - http://emma-dodi-greensock.webflow.io/
Private Link - https://preview.webflow.com/preview/emma-dodi-greensock?preview=3b2674bca8d4db06d4969a2d511f9a44

Thanks,
Smallio

[samliew (webflowexpert.com)]

$('.grayscale').hover(function() {
  $(this).toggleClass('grayscale-off');
});

[smallio (Will Small)]

@samliew

$(‘.grayscale’).hover(function() {
$(this).toggleClass(‘grayscale-off’);
});

Thanks man