Hover on a image - html

Question

I'm doing a page where I'm now messing with some images but the image hover isn't working at all, I'ts behind the main image as it should be but it as parts of it showing to the sides, and if I correct the position of it to be behind the image it is noticable it's there.
How can I hide only to appear when hovering?
Here I send the html and the css.
<div class="social-icons">
<a class="ImgOnHover" href="https://pt-pt.facebook.com/"><img src="img\facebook.png" alt="Facebook" height="30" width="30"></a>
</div>
underneath is the css:
.social-icons{
text-align: right;
padding-right: 15px;
padding-top: 10px;
margin-bottom: 25px;
}
.ImgOnHover{
display: inline-block;
width: 50px;
background: url('img/facebook-hover.png') no-repeat;
}
.ImgOnHover:hover img {
visibility: hidden;
}

Answer 1

I don't really know what you are trying to achieve, but this is definately not the way I would do it.
Can't you just do something like this instead?
https://codepen.io/anon/pen/JNmoGw
<div class="social-icons">
<a class="ImgOnHover" href=""></a>
</div>
.social-icons{
text-align: right;
padding-right: 15px;
padding-top: 10px;
margin-bottom: 25px;
}
.ImgOnHover{
display: inline-block;
width: 50px;
background: url('https://image.flaticon.com/teams/new/1-freepik.jpg') no-repeat top left;
background-size:100%;
content: "";
height:50px;
}
.ImgOnHover:hover{
background: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png') no-repeat top left;
background-size:100%;
}

Answer 2

If you add this to your CSS, it matches up:
.ImgOnHover img {
width: 50px;
height: auto;
}
Example: https://jsfiddle.net/1r0xa9ox/3/
With your edited question, if you want it to be hidden to begin with and appear when you hover, switch the styling to this:
.ImgOnHover img {
width: 50px;
height: auto;
visibility: hidden;
}
.ImgOnHover:hover img {
visibility: visible;
}