I'm working on a new splash/welcome screen for a site that's still in development. The page has one section and within that section are three images. Each image links to a specific page. I am trying to use CSS to do a few things:
Somewhat grey/fade out all images that are not being hovered on, but not on the mobile version.
Fully saturate the image when the mouse is hovering over it, again not on the mobile version.
Zoom in on the image by 10% when hovering. I have not yet decided if I want the image to zoom within the block, by 10%, or if I want the block itself to get 10% larger when hovering.
I have identified the individual section number with the Squarespace ID Finder plugin, and the section I'm working on is section[data-section-id="660715834081535383850183"]. I need to make sure these effects are only applied to this specific section, not the whole site or any other sections/pages.
Any help would be appreciated. I am new to CSS so there may be a bit of ELI5 along the way. Thanks everyone!