Jump to content

Mouse Hover over image with embedded link

Go to solution Solved by tuanphan,

Recommended Posts

I have several images (on my Work-Film/TV Drama) page which have embedded links within the images. Currently when I hover my mouse over the images I get the "pointing hand" cursor but is there a way to ghost/animate/alter/somehow change the image to make it more obvious when the mouse is hovering over the image? TIA.

Link to comment
  • Replies 10
  • Views 594
  • Created
  • Last Reply

Top Posters In This Topic

On 5/28/2024 at 4:58 PM, jackmackdaddy said:

You can use this code to Website > Website Tools > Custom CSS

section[data-section-id="664e4caf1c538e72f21773cf"] .image-block:hover img {
    opacity: 0.2;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
22 hours ago, jackmackdaddy said:

Sure: https://www.johnmcphillips.com/work-film/tvdrama

 

Thanks so much! Would it be possible to also do the same for the two pages "Comedy" and "Animation" beside that page? I've tried to find the section ID to just replace it in your code but I can't see it...

You can use this free tool to find ID

https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thank you! What a great and simple extension. Is there anything that can be added to the current line of code to only have the image opacity when there is an embedded link in the image? And to leave it alone when there is no embedded link?

Link to comment
21 hours ago, jackmackdaddy said:

Thank you! What a great and simple extension. Is there anything that can be added to the current line of code to only have the image opacity when there is an embedded link in the image? And to leave it alone when there is no embedded link?

You mean apply code for Linked Image only.

With No Link Image (image non clickable), don't apply the code?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution
On 5/29/2024 at 6:17 PM, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

section[data-section-id="664e4caf1c538e72f21773cf"] .image-block:hover img {
    opacity: 0.2;
}

 

Change it to this code

section[data-section-id="664e4caf1c538e72f21773cf"] .image-block:hover .sqs-block-image-link img {
    opacity: 0.2;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.