jackmackdaddy Posted May 27 Share Posted May 27 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
tuanphan Posted May 28 Share Posted May 28 Can you share link to page? We can check easier. 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
jackmackdaddy Posted May 28 Author Share Posted May 28 Sure: https://www.johnmcphillips.com/work-film/tvdrama Link to comment
tuanphan Posted May 29 Share Posted May 29 On 5/28/2024 at 4:58 PM, jackmackdaddy said: Sure: https://www.johnmcphillips.com/work-film/tvdrama 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
jackmackdaddy Posted May 29 Author Share Posted May 29 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... Link to comment
tuanphan Posted May 30 Share Posted May 30 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
jackmackdaddy Posted May 30 Author Share Posted May 30 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
tuanphan Posted May 31 Share Posted May 31 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 tuanphan Posted June 1 Solution Share Posted June 1 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
jackmackdaddy Posted June 4 Author Share Posted June 4 Thanks so much for all your help Tuanphan. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment