title: How do I add a gradient (black to grey / top bottom) to an image on hover?
body: <p>Got close with this, but for some reason it loses the gradient.  I think it has to do with z-index but not sure.  When I put an images file that cannot be found, when you hover then you see the gradient.</p>
  
  <pre><code>&lt;style&gt;
  .border_overlay:hover {
  
  /* Image Dimensions */
  width:160px;
  height:160px;
  
  /* Moves overlay over Image */
  position:relative;
  z-index:1;
  margin-bottom:-160px;
  
  /* SVG fallback(Opera 11.10-, IE9) */
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDAsMCwwLDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoMTI4LDEyOCwxMjgsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);
  
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, rgba(0,0,0,1), rgba(128,128,128,1));
  
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, rgba(0,0,0,1), rgba(128,128,128,1));
  
  /* Chrome 7+ &amp; Safari 5.03+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,1)), color-stop(1, rgba(128,128,128,1)));
  
  /* IE5.5 - IE7 */
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF000000,EndColorStr=#FF808080);
  
  /* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF000000,EndColorStr=#FF808080)"
  
  /* Border width and color */
      border:1px solid black;
  
  /* Border Opacity */
  opacity:0.3;
  .filter:alpha(opacity=30);
  -ms-filter: 'alpha (opacity=30)';
  }
  
  &lt;/style&gt;
  
  &lt;img class="border_overlay" src="https://www.google.com/images/srpr/logo3w.png" width=160 height=160 alt="Image"&gt;
  </code></pre>