title: CSS-Image border glow when hover with individual color
body: <p>I would like to ask how should I apply different colour glow to an image border when a user hover over? like say that in this <a href="http://jsfiddle.net/jcsjpcbb/2/">JSFiddle</a> file, I have a green thumb and a red thumb. I want each image border to glow according to the colour of the image, or any colour that I specify. How should I achieve that? </p>
  
  <p>PS** For example purposes the image are converted to base64 in the JSFiddle.</p>
  
  <p>This is how I do in my CSS</p>
  
  <pre><code>img{
      width: 16px;
      cursor: pointer;
      padding: 10px;
  }
  
  img:hover{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  }
  </code></pre>
  
  <p>Thank You</p>