html - 如何调整背景颜色的大小并调整其位置？

Question

我有一张图片，当我悬停它时，背景颜色会改变，但我想改变大小和位置。

.hoverme:hover {
  background-color: #f7b0ee;
  border-radius: 50%;
  transition: initial 0.5s ease;
}

<div class="col col-md-6">
  <a href="#" onclick="gotofive()">
    <img class="hoverme" style="width: 50%;" src="https://preview.ibb.co/e00h5d/yes_student.png">
  </a>
</div>

我想把它变成这样:

我已经尝试了 background-size，但没有任何反应。

Answer 1

使用radial-gradient代替背景色，您可以轻松控制它的位置和大小:

.hoverme:hover {
  background-image: radial-gradient(#f7b0ee 50%, transparent 51%);
  background-position:0 -20px;
  background-repeat:no-repeat;
  /*border-radius: 50%; no more needed*/
}

<img class="hoverme" style="width: 40%;" src="https://preview.ibb.co/e00h5d/yes_student.png">

如果你想要过渡，试试这个:

.hoverme {
  background-image: radial-gradient(circle at 50% calc(50% - 20px),#f7b0ee 50%, transparent 51%);
  background-position:center;
  background-size:0% 0%;
  background-repeat:no-repeat;
  /*border-radius: 50%; no more needed*/
  transition:all 1s;
}
.hoverme:hover {
  background-size:100% 100%;
}

<img class="hoverme" style="width: 40%;" src="https://preview.ibb.co/e00h5d/yes_student.png">