Image Hovering(Across a Section)

Site URL: https://www.brightfuturesolarenergy.com/our-team

So I managed to finally get some CSS to work on a page, however I wanted to make it across the whole section instead of just 1 image so I don't have to have a long line of code for every image I want to be clickable with the hovering. 
I understand I would need the section code: section[data-section-id="62b23803e4d8ad2547975153"], but that is as far as I got. 

/* hide image on hover */
  div#block-yui_3_17_2_1_1655846291928_113473 a:hover img {
    opacity: 0.3;

}
div#block-yui_3_17_2_1_1655846291928_113473  a img {
    transition: all ease-in-out 0.5s;
    opacity: 0.9;
}

1 hour ago, aTypicalGuy said:

Site URL: https://www.brightfuturesolarenergy.com/our-team

So I managed to finally get some CSS to work on a page, however I wanted to make it across the whole section instead of just 1 image so I don't have to have a long line of code for every image I want to be clickable with the hovering. 
I understand I would need the section code: section[data-section-id="62b23803e4d8ad2547975153"], but that is as far as I got. 

/* hide image on hover */
  div#block-yui_3_17_2_1_1655846291928_113473 a:hover img {
    opacity: 0.3;

}
div#block-yui_3_17_2_1_1655846291928_113473  a img {
    transition: all ease-in-out 0.5s;
    opacity: 0.9;
}

Do you mean adding style for all images on all sections in a page?

We can consider the Page Id selector for your Css Code

On 10/12/2022 at 4:18 PM, bangank36 said:

Do you mean adding style for all images on all sections in a page?

We can consider the Page Id selector for your Css Code

yes all sections in a page, I am trying to figure that out since I only currently know how to do 1 image at a time.

Instead of applying for each image block, we can selector the all image block on section by following code

section[data-section-id="62b23803e4d8ad2547975153"] .sqs-block-image:hover img {
  opacity: 0.3;
}

section[data-section-id="62b23803e4d8ad2547975153"] .sqs-block-image img {
  transition: all ease-in-out 0.5s;
  opacity: 0.9;
}

Support me by pressing 👍 if this useful for you

I use the Squarespace ID Finder extension to get the section

How to get section Id: https://recordit.co/Aj9vXw6rfY

On 10/14/2022 at 7:03 AM, bangank36 said:

Instead of applying for each image block, we can selector the all image block on section by following code

section[data-section-id="62b23803e4d8ad2547975153"] .sqs-block-image:hover img {
  opacity: 0.3;
}

section[data-section-id="62b23803e4d8ad2547975153"] .sqs-block-image img {
  transition: all ease-in-out 0.5s;
  opacity: 0.9;
}

Support me by pressing 👍 if this useful for you

It does work! Though it does it for the images that also aren't linked. I did find use for this CSS for pages that every image that has links so I appreciate that.