Q:

How do you change a color of an image entirely when hovered in  tag element?

I have this example code that hovers an image to change the background color. How do you fill the entire image with color when hovered?
In my code snippet, it only fills the background color of an a tag element but not the image. 
Here's an image to further clarify my question.

How do achieve this using the hover effect in  tag element.

a img:hover {
    background-color: purple;
}
a:hover {
    background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<!-- Hovered with image no text -->
<a href="https://www.w3schools.com"><img src="cart.png"></a>

<!-- Hovered without image just text -->
<a href="http://www.wikipedia.org">Change color text</a>
</p>

</body>
</html>

A:

I have found another method to change the background image. I suppose to have two images so when hovered it will change the image. Thanks for the info @Jaromanda X

#my-img:hover {
    content: url('images/pinkcart.png');
}
<!DOCTYPE html>
<html>
<head>
</head>

<body>

<img id="my-img" src="images/redcarticon.png"/>
</p>

</body>
</html>

And thank you also for helping me everyone.

