javascript - 使用 svg 或 css3 的圆形 mask 效果

Question

我希望通过使用可扩展的 jQuery 来实现这种效果，但我没有做到这一点，请用只有一张图片的 fiddle 给我答案。

Answer 1

你可以使用 pseudo 元素来添加覆盖层和 box-shadow 来提供 border

演示 - http://jsfiddle.net/mhm8sxph/

div {
  width: 300px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}
div img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
div:hover:before {
  width: 130px;
  height: 130px;
}
div:before {
  content: '';
  position: absolute;
  background: transparent;
  top: 50%;
  left: 50%;
  box-shadow: 0px 0px 0px 5px grey, 0px 0px 0px 160px rgba(231, 231, 231, 0.75);
  width: 80px;
  border-radius: 50%;
  height: 80px;
  transform: translate(-50%, -50%);
  transition: .5s linear;
}

<div>
  <img src="http://placeimg.com/300/200/people" border="0" />
</div>