Jump to content

Image Hovering(Across a Section)

Recommended Posts

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;
}

Edited by aTypicalGuy
visual change
Link to comment
  • Replies 5
  • Views 218
  • Created
  • Last Reply

Top Posters In This Topic

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

I use the Squarespace ID Finder extension to get the section

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
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. 

Edited by aTypicalGuy
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.