使用svg或css3进行圆形遮罩效果

Question

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

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>

Answer 2

您只需创建mask，将其应用于image，然后根据鼠标位置更改cx的{​​{1}}和cy属性使用JavaScript。

circle

var im = document.getElementById('im');
im.addEventListener('mousemove', function(e) {
  document.getElementById('c').setAttribute('cx', e.clientX - im.getBoundingClientRect().left);
  document.getElementById('c').setAttribute('cy', e.clientY - im.getBoundingClientRect().top);
})

Answer 3

我认为这可能对你有所帮助。

基于CSS3：

.trans {
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
.test_outer {
    display: block;
    width: 512px;
    height: 381px;
    margin: 1em auto;
    position: relative;
    overflow: hidden;
}
.test_cover {
    width: 100px;
    height: 100px;
    border: 512px solid rgba(0, 0, 0, .35);
    border-radius: 50%;
    position: absolute;
    left: -325px;
    top: -465px;
}
.test_cover:hover {
    width: 150px;
    height: 150px;
    left: -350px;
    top: -490px;
}
.test_cover:hover:after {
    content: "Look at me~";
    margin: 50px 0 0 -30px;
    color: #fff;
    font: bold 20px/1.2 'Lucida Console';
    text-shadow: 1px 1px rgba(0, 0, 0, .35);
    position: absolute;
}

<a href="#" class="test_outer">
    <span class="test_cover trans"></span>
    <img src="http://i.stack.imgur.com/e5sjf.jpg" width="512" height="381" border="0" />  
</a>

==>> jsfiddle