使用 HTML 和 CSS 很容易做到这一点。这是一个例子:
http://codepen.io/anon/pen/Hwfnz
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div {width: 300px; height: 240px;}
a {display: table; width: 300px; height: 240px; vertical-align: middle; text-align: center; position: relative;}
span {display: none;}
a:hover span {width: 300px; height: 240px; line-height: 240px; position: absolute; left: 0; top: 0; display: block; text-align: center; background: rgba(67,81,96,0.7); }
span b {font-size: 1.5em; font-weight: normal; padding: 8px 12px; border-radius: 5px; background: #6bbe70; color: #fff; font-family: sans-serif;}
a:hover span b:hover {background: #000;}
img {background: #e7e7e7; border: none; vertical-align: bottom;}
</style>
</head>
<body>
<div>
<a href=""><img src="http://pageaffairs.com/sp/so-16390475.jpg" width="300" height="240"> <span><b>download</b></span></a>
</div>
</body>
</html>