与此接近，但由于某种原因它失去了渐变。我认为这与 z-index 有关，但不确定。当我放置一个找不到的图像文件时，当您将鼠标悬停时，您会看到渐变。
<style>
.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+ & 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)';
}
</style>
<img class="border_overlay" src="https://www.google.com/images/srpr/logo3w.png" width=160 height=160 alt="Image">