Circular masking effect with svg or css3

Question

I want this effect by using jQuery which would be scalable but I failed to do this please provide me the answer with fiddle with only an image.

Answer 1

you can use pseudo element for adding overlay and box-shadow for giving the border

demo -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>