Заполните изображение / кнопку цветом при наведении

Question

Я полностью новичок в 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;
}

Answer 1

Вполне выполнимо Хитрость в том, чтобы добавить радиус границы 100%, чтобы создать круг вокруг изображения. Вот три способа сделать это.

Codepen

Я также обрезал и реэкспортировал ваше изображение так, чтобы оно было идеальным квадратом 275 пикселей (если вам когда-нибудь понадобится выполнить 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>