Issue with CSS sprite when hovering over an image with a link - css

Question

I'm working on my website and was originally using two separate images at the size of 210 by 210px for an image link (which changes into another image when hovered over.) However I found that there was always a little flicker when first hovering over the image which obviously bothered me so I decided to switch to a CSS sprite with two the images on it instead. That way I wouldn't get the flicker.
Unfortunately, I can't seem to get the CSS sprite to work successfully. I'm creating my website in Wordpress BoldGrid Post and Page Builder so I'm not doing the HTML/CSS, but the Customizer allows me to add my own Custom CSS which is what I'm doing.
I've given the image link the CSS ID "home" in the image settings (in Post and Page Builder). This is what I've put in my Custom CSS:
#home:hover a {
background:url(https://www.mywebsite.com/hoverimage.png);
position: absolute;
background-position: -210px 0;
}
Currently, the original image isn't budging and I can see the hover image UNDERNEATH the original image (It's border is thicker and I can see it underneath).
I must have missed something with this. Because I'm working in a Wordpress Post and Page Builder it makes following CSS Sprite tutorials online not as straightforward. Hopefully it's a easy fix.

Answer 1

:hover is being used incorrectly...
by using #home:hover a you are only applying the background to the a when the element #home is hovered...
it should be:
#home a {
background:url(https://www.mywebsite.com/hoverimage.png);
position: absolute;
}
#home:hover a {
background-position: -210px 0;
}
Something like below:
#home a img {
display: none;
}
#home a {
background:url("https://via.placeholder.com/420x210");
position: absolute;
width: 210px;
height: 210px;
display: block;
}
#home:hover a {
background-position: -210px 0;
}
<div id="home">
<a href="#">
<img src="https://via.placeholder.com/210x210?text=original%20image">
<a>
</div>