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

我是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>