悬停时显示背景图像的动画圆圈

Question

我想将鼠标悬停在一个元素上，并以动画方式显示一个带有圆形边框的背景图像（想想当聚光灯关闭一个角色时的反面，让他们处于黑暗中，例如在马里奥游戏中……呵呵）。

这是我目前的尝试，基于Neri_Y's answer 到How to create a circle hover reveal when hovering over a picture（可能不是正确的方法）：

.icon::after {
  content: "";
  position: absolute;
  left: -5em;                 /* adujust this value */
  top: -5em;                  /* adujust this value */
  width: 20em;               /* adujust this value */
  height: 20em;              /* adujust this value */
  transform: scale(0);
  border-radius: 50%;
  z-index: -1;
  background-image: url(https://i.imgur.com/Yb4Uyux.png);
  transition: all 0.2s ease-out;
}

.icon:hover::after {
  transform: scale(1);
}

<div class="icon">@<div>

注意事项：

1. 正如您现在所看到的，问题是整个图像都在变大，而我只是希望圆圈变大。

2. 另外，我希望圆圈从元素的中点开始增长（或者光标的点也可以），而这似乎从图像的中心扩展？

Answer 1

clip-path 可以做到这一点：

.icon::after {
  content: "";
  position: absolute;
  inset:-5em;
  clip-path:circle(0);
  z-index: -1;
  background: url(https://i.imgur.com/Yb4Uyux.png);
  transition: all 0.2s ease-out;
}

.icon:hover::after {
  clip-path:circle(50%);
}

.icon {
  margin:5em;
  width:1em;
  height:1em;
  display:inline-block;
  position:relative;
}

<div class="icon">@<div>