Fill image/button with colour on hover - css

Question

I'm completely new to CSS & Wordpress, I've spent all night trying and looking for a solution to this - so hopefully you can help me.
I have this image, and when someone hovers over it I want the white/see-through portion in the middle to fill with the colour #f7ca18 from the bottom to the top
http://wp.tek-monkey.com/wp-content/uploads/2015/06/circle1_test_seethrough.png
I've tried the following just to try and get a simple transition from the white/see-through inner to my desired colour, however none of them have worked. I'm not sure if I'm doing something wrong in wordpress; under appearance>editor I paste the css code at the bottom, and then on the page with the image I edit the image and type into the box (Image CSS Class) .circle-testfor example.
.circle-test {
background: #ffffff;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
}
.circle-test:hover {
background: #f7ca18;
}
.circle-test:hover{
background-color: #f7ca18;
}
.circle-test{
background:none;
}
.circle-test:hover{
background:#f7ca18;
}

Answer 1

Totally doable. The trick to this is adding a border-radius of 100% to create a circle around the image. Here are three ways you can do this.
Codepen
I also cropped & re-exported your image so that it's a perfect 275px square (If you ever need to do bg transitions on an irregularly-shaped image, you could look into SVG). You're more than welcome to download that image and use it instead!
I did this kind of quickly, so let me know if you have any questions!
/* Option 1: Image only */
.circle-test {
display: block;
margin: 0 auto;
border-radius: 100%;
background-image: url('http://www.heavilyedited.com/hands-temp.png');
background-repeat: no-repeat;
-webkit-transition: background 1s linear;
-moz-transition: background 1s linear;
transition: background 1s linear;
}
.circle-test:hover {
background-color: #f7ca18;
}
/* Option 2: Div with background image*/
.circle-test2 {
display: block;
width: 275px;
height: 275px;
margin: 0 auto;
border-radius: 100%;
background-image: url('http://www.heavilyedited.com/hands-temp.png');
background-repeat: no-repeat;
transition: background 1s linear;
}
.circle-test2:hover {
background-color: #1D9B8D;
}
/* Option 3: Image is inside div*/
.circle-test3 {
display: block;
width: 275px;
height: 275px;
margin: 0 auto;
border-radius: 100%;
background-image: url('http://www.heavilyedited.com/hands-temp.png');
background-repeat: no-repeat;
-webkit-transition: background 1s linear;
-moz-transition: background 1s linear;
transition: background 1s linear;
}
.circle-test3:hover {
background-color: #00aeef;
}
<!-- Option 1: Image only -->
<img src="http://www.heavilyedited.com/hands-temp.png" class="circle-test"/>
<!-- Option 2: Div with background image -->
<div class="circle-test2">
</div>
<!-- Option 3: Image is inside div-->
<div class="circle-test3">
<img src="http://www.heavilyedited.com/hands-temp.png" />
</div>