jinlikegold Posted March 2, 2023 Posted March 2, 2023 Hi there, I put in a custom hover effect on some image block elements to have them change to a different image on hover, and they seemed like they were working fine at first. But now they are glitchy and taking time to load/respond. Any thoughts on troubleshooting? URL: https://www.youbelongsd.com/welcome-ybh - it's the 3rd section down with the round images My code: // changes images on hover to new images: // coworking: #block-yui_3_17_2_1_1668805059330_119688 .sqs-image-shape-container-element:hover { background: url("https://static1.squarespace.com/static/5b478671f407b4f13da9e67b/t/63f7cd800bf01d24735339d1/1677184387214/Affordable+Coworking+-+On+Hover.jpg") no-repeat!important; background-size: cover!important; background-position: 50% 25%!important; display: block; } // creative studios: #block-yui_3_17_2_1_1668805059330_120693 .sqs-image-shape-container-element:hover { background: url("https://static1.squarespace.com/static/5b478671f407b4f13da9e67b/t/63f7cdc468db8f5573f792e8/1677184454063/Creative+Studios+%2B+Equipment+-+On+Hover.jpg") no-repeat!important; background-size: cover!important; background-position: center!important; display: block; } //business: #block-yui_3_17_2_1_1668805059330_121720 .sqs-image-shape-container-element:hover { background: url("https://static1.squarespace.com/static/5b478671f407b4f13da9e67b/t/63f7cdee22d8ce2869239595/1677184497770/Business+Development+-+On+Hover.jpg") no-repeat!important; background-size: cover!important; background-position: 40% 50%!important; display: block; } // community: #block-yui_3_17_2_1_1668810433020_105277 .sqs-image-shape-container-element:hover { background: url("https://static1.squarespace.com/static/5b478671f407b4f13da9e67b/t/63f7cdf2fdfe3f3d38d76f24/1677184503511/Community+%26+Cultural+Programming+-+On+Hover.jpeg") no-repeat!important; background-size: cover!important; background-position: 45% 50%!important; display: block; } /* hide image on hover */ div#block-yui_3_17_2_1_1668805059330_119688 a:hover img, div#block-yui_3_17_2_1_1668805059330_120693 a:hover img, div#block-yui_3_17_2_1_1668805059330_121720 a:hover img, div#block-yui_3_17_2_1_1668810433020_105277 a:hover img { opacity: 0; } Thank you! Hey, I'm Jin (he/him). I'm a front end dev learning to make custom sites in Squarespace. If you find my suggestions helpful, please upvote & like!😺
Solution PMBMatt Posted March 2, 2023 Solution Posted March 2, 2023 Hello! From the code you provided, it seems like you are using CSS to change the background image of some image block elements on hover, and then hiding the original image. If the hover effect was working fine before but has now become glitchy and slow to load, there are a few possible causes you can check: Image file size: The images you are using for the hover effect might be too large in file size, which can cause slow loading times. You can try compressing the images to reduce their file size, or using smaller images. Server response time: The server hosting your website might be experiencing high traffic or other issues that are causing slow response times. You can try accessing your website at different times to see if the issue is consistent or intermittent. CSS specificity: The CSS selectors you are using might be too specific, which can cause the browser to take longer to load and render the styles. You can try simplifying the selectors to see if that improves performance. Browser caching: The browser might be caching the images and styles, which can cause the hover effect to load slowly or not at all. You can try clearing your browser cache or using a private browsing window to see if that helps. I hope these suggestions help you troubleshoot the issue with your hover effect! jinlikegold 1
PMBMatt Posted March 2, 2023 Posted March 2, 2023 To simplify the selectors, you can try removing unnecessary specificity, such as removing parent elements or classes that are not needed. For example, instead of using: #block-yui_3_17_2_1_1668805059330_119688 .sqs-image-shape-container-element:hover You can try using: .sqs-image-shape-container-element:hover This will make the selector less specific and easier for the browser to match and apply the styles. jinlikegold 1
jinlikegold Posted March 2, 2023 Author Posted March 2, 2023 18 hours ago, PMBMatt said: Hello! From the code you provided, it seems like you are using CSS to change the background image of some image block elements on hover, and then hiding the original image. If the hover effect was working fine before but has now become glitchy and slow to load, there are a few possible causes you can check: Image file size: The images you are using for the hover effect might be too large in file size, which can cause slow loading times. You can try compressing the images to reduce their file size, or using smaller images. Server response time: The server hosting your website might be experiencing high traffic or other issues that are causing slow response times. You can try accessing your website at different times to see if the issue is consistent or intermittent. CSS specificity: The CSS selectors you are using might be too specific, which can cause the browser to take longer to load and render the styles. You can try simplifying the selectors to see if that improves performance. Browser caching: The browser might be caching the images and styles, which can cause the hover effect to load slowly or not at all. You can try clearing your browser cache or using a private browsing window to see if that helps. I hope these suggestions help you troubleshoot the issue with your hover effect! Thank you so much to write all this out! I will definitely try some things out based on your suggestions. Hey, I'm Jin (he/him). I'm a front end dev learning to make custom sites in Squarespace. If you find my suggestions helpful, please upvote & like!😺
jinlikegold Posted March 2, 2023 Author Posted March 2, 2023 @PMBMattI think it was the image size causing the issue! I put in smaller images and it seems to be fixed, so I'll let my client know they need to be resized. It's funny how I always assume something is the matter with my code, but it turns out to be a simpler fix. Much appreciated! P.S. I also appreciate you sharing that higher specificity takes longer to load - I didn't know that. Unfortunately in this case, I couldn't reduce the specificity as I needed to target each block with a different image change, but I'll definitely keep it in mind going forward. Hey, I'm Jin (he/him). I'm a front end dev learning to make custom sites in Squarespace. If you find my suggestions helpful, please upvote & like!😺
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment