Using ":hover" with images

I currently have a homepage for my website containing 4 circular images that double as buttons.

My Question: I am trying to code (using html and css) so that when i hover on these images, the picture in the circular button fades to a dark grey and a small button appears instead in the center of the circular image. When this button is clicked it will direct you elsewhere, rather than using the entire image as a button.

Simplified: When i hover over an image, i would like the image to fade to a dark grey and a small button appear in the middle of the image. Thanks

Below is code i have for an example image and the text displayed above it, however i do not know how to darken the image and make a button appear.

<a href = "https://twitter.com/"> <button id = "ButtonMyCV"></button> </a>
<a href = "https://twitter.com/"> <p class = "TextMyCV"> My CV </p> </a>

#ButtonMyCV
{
background-image:url("http://ift.tt/1Dh3GOo");
background-size: cover;
background-position: center center;
border-radius: 50%;
border: white solid 5px;
height: 300px;
width: 300px;
margin-left: 40px;
margin-top: 220px;
position: fixed;
}

.TextMyCV
{
position: fixed;
margin-left: 135px;
margin-top: 175px;
color: white;
font-size: 35px;
}

.TextMyCV:hover
{
text-decoration: underline;
}

#ButtonMyCV:hover
{
}