How to make inner box-shadow transparent on hover

Question

I want to make black ring which appears on hover to be transparent. but when i change box-shadow: 0 0 0 5px #000, 0 0 0 10px green to box-shadow: 0 0 0 5px transparent, 0 0 0 10px green it not appearing. how do i achieve it?

html { 
  background-image: url('https://cdn-images-1.medium.com/max/800/1*aoR-yl7jicuEvQ5hZoQvjw.png');
  background-size: 100%;
}
div{
  position: relative;
  width: 150px;
  height: 150px;
  background: #ccc;
  border-radius: 50%;
  transition: 0.3s;
  border: 5px solid #fff;
}
div:hover{
  box-shadow: 0 0 0 5px #000, 0 0 0 10px green;
}

<div></div>

Answer 1

Simply add a pseudo element using position absolute and make that expand by 10 px ( 5px for border and 5px for the gap) and then add box shadow and also you need to add transition on the pseudo element now instead of the element itself

html { 
  background-image: url('https://cdn-images-1.medium.com/max/800/1*aoR-yl7jicuEvQ5hZoQvjw.png');
  background-size: 100%;
}
div{
  position: relative;
  width: 150px;
  height: 150px;
  background: #ccc;
  border-radius: 50%;
  border: 5px solid #fff;
}
div:after{
  position:absolute;
  border-radius: 50%;
  content:"";
  z-index:-1;/* depends on your need change to 1 if want to overlap the div on hover*/
  top:-10px;
  bottom:-10px;
  left:-10px;
  right:-10px;
  transition:all 0.3s;
}
div:hover:after{
  box-shadow:0 0 0 5px green;
}

<div></div>

Answer 2

I don't think so you can do this on this way but yes it is possible by using pseudo element

for example

div:after {
  content: "";
  bottom: -10px;
  top: -10px;
  left: -10px;
  right: -10px;
  border-radius: 50%;
  position: absolute;
  transition: all 0.3s;
}

div:hover:after {
  box-shadow: 0 0 0 5px green;
}

html {
  background-image: url('https://cdn-images-1.medium.com/max/800/1*aoR-yl7jicuEvQ5hZoQvjw.png');
  background-size: 100%;
}

div {
  position: relative;
  width: 150px;
  height: 150px;
  background: #ccc;
  border-radius: 50%;
  transition: 0.3s;
  border: 5px solid #fff;
}

div:after {
  content: "";
  bottom: -10px;
  top: -10px;
  left: -10px;
  right: -10px;
  border-radius: 50%;
  position: absolute;
  transition: all 0.3s;
}

div:hover:after {
  box-shadow: 0 0 0 5px green;
}

<div></div>