title: How to form ring around circle on hover
body: <p><a href="https://i.stack.imgur.com/YhEuf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YhEuf.jpg" alt="I want like this. The outer ring. I want it to appear on hover"></a>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.images {
   width: 125px;
   border: 2px solid #FFF;
   border-radius: 100px;
   display: inline-block;
  }
  
  .images:hover {
   background: transparent;
   margin-top:4px;
   color: transparent !important;
   border:1px solid #999;
   
   /*{Shadow}*/
   box-shadow:inset 0 0 5px 0 #333;
   -moz-box-shadow:inset 0 0 5px 0 #333;
   -webkit-box-shadow:inset 0 1px 2px 0 #333, 0 1px 1px 0 #fff;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="pic_mountain.jpg" class="images" alt="Save icon"/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want ring around my circular image on hover. I dont want border to my image. I want ring which is little away from image. How do i do this with css?</p>