Isolate Block-ID of single image within a gallery

I think my problem is locating the block id of a single image within a gallery.  Here is the back story.

I am using a gallery as a navigation bar on a sub-page of my website, with each of three images linking to a new page.  I found this approach works really well to use images to do what coding can't.  It also allows me to use the gallery feature to accomodate variable screen widths, fix all three together, etc. (Note: the navigation gallery is only going to be used for desktop width screens, not for mobile devices.  That is a different challenge).  At any rate, with this navigation gallery I have been exploring the hover over effect for this to make the images go from greyscale to colour. 

So far the best way I have found to achieve the effect is to stack two galleries on top of each other and make the entire gallery fade out (to colour) when the cursor hovers across it.

#block-yui_3_17_2_1_1677669975446_9852{
    opacity: 1;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
#block-yui_3_17_2_1_1677669975446_9852:hover {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    -moz-transition: opacity 1.5s ease-in-out;
    -webkit-transition: opacity 1.5s ease-in-out;
}

What I would love to achieve is to make each of the individual images "fade out" (to colour) independently.  To do this I think I would need to locate the Block ID (static) for each of the individual images and substitute them in the code above(?), however the most I can find are YUI IDs (dynamically generated) for each.  

<div class="slide sqs-gallery-design-grid-slide" data-type="image" data-animation-role="image" id="yui_3_17_2_1_1683033160420_304">
              <div class="margin-wrapper">
                
                <a href="/installation-art" class="
                    image-slide-anchor
                    
                    content-fit
                  ">
                  
                  <noscript><img src="https://images.squarespace-cdn.com/content/v1/5dfb9f96229544557f36674d/1683032909403-MMWFXZUS4JBTM129AQMG/INSTALLATION+ART_3.jpg" alt="INSTALLATION ART_3.jpg" /></noscript><img class="thumb-image loaded" data-src="https://images.squarespace-cdn.com/content/v1/5dfb9f96229544557f36674d/1683032909403-MMWFXZUS4JBTM129AQMG/INSTALLATION+ART_3.jpg" data-image="https://images.squarespace-cdn.com/content/v1/5dfb9f96229544557f36674d/1683032909403-MMWFXZUS4JBTM129AQMG/INSTALLATION+ART_3.jpg" data-image-dimensions="498x310" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="640141dd6c1fc02462d44851" data-type="image" style="opacity: 1; left: 0px; top: 61.1566px; width: 324px; height: 201.687px; position: relative;" data-parent-ratio="1.0" alt="INSTALLATION ART_3.jpg" data-image-resolution="500w" src="https://images.squarespace-cdn.com/content/v1/5dfb9f96229544557f36674d/1683032909403-MMWFXZUS4JBTM129AQMG/INSTALLATION+ART_3.jpg?format=500w">
                </a>
                
              </div>
            </div>

FIRST QUESTION:  Does having the images in a gallery mean that I can't engage each image independently with CSS?

SECOND QUESTION:  Is there a better approach to this?

Also, a disclaimer; I only understand a cursory, hobby-level of code.

Can you share link to page where you use gallery? We can check easier

Since you did not share your site URL yet we can not provide a detail solution.

But using CSS selector nth-child we can identify the image by its order

https://www.w3schools.com/cssref/sel_nth-child.php