MrJC

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.

I believe that I am having this problem as well? As the width of my screen shrinks the height of my images in a carousel shrinks (making the images very small on a mobile device). I have tried the above advice and the best effect I can have is to keep the overall height of the gallery tall (ex: min-height: 150px, 30vh, etc.) however the images in that carousel gallery still shrink while the gallery height respects the limits. This creates a large blank buffer (padding? I'm not sure the term) below the images when they top justify. https://www.allyall.ca/built (down at the bottom of the page "Previous Work") @media screen and (max-width:767px) { #block-yui_3_17_2_1_1675529450534_14167{ overflow: visible; height: 300px; } } I've tried doing both specific block ids and generic: Also I am not sure if it is relevant but I have the following code that adds padding, which when I turn it off doesn't seem to effect it. /*Spaces between Carousel Gallery Images*/ .sqs-gallery-design-strip-slide { padding-right:10px; margin-left:10px; margin-top:0px; margin-bottom:0px; border-right: 1px solid #dcdcdc; }