Jump to content

Isolate Block-ID of single image within a gallery

Recommended Posts

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.

    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="
                  <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">

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.


Link to comment

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


BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • 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.