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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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.