悬停时用颜色填充图像/按钮

我是CSS和Wordpress的新手, 我整夜都在努力寻找解决方案, 希望你能为我提供帮助。
我有这张图片, 当有人将鼠标悬停在上面时, 我希望中间的白色/透明部分从底部到顶部填充颜色＃f7ca18
http://wp.tek-monkey.com/wp-content/uploads/2015/06/circle1_test_seethrough.png
我尝试了以下方法, 以尝试从白色/透明内部轻松过渡到所需的颜色, 但是这些方法均无效。我不确定在wordpress中是否做错了什么；在” 外观> 编辑器” 下, 我将css代码粘贴到底部, 然后在包含图像的页面上编辑图像, 然后在框中键入内容(图像CSS类)。例如, circle-test。

.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; }

#1完全可行。诀窍是添加100％的边界半径以在图像周围创建一个圆。你可以通过以下三种方式执行此操作。
码笔
我还裁剪并重新导出了你的图像, 使之成为一个完美的275px正方形(如果你需要对不规则形状的图像进行bg过渡, 则可以查看SVG)。非常欢迎你下载该图像并使用它！
【悬停时用颜色填充图像/按钮】我做得很快, 因此, 如果你有任何疑问, 请告诉我！

/* 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>