Image hover effect is glitchy

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!

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.

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:

1. 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.

2. 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.

3. 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.

4. 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.

@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.