CSS和html如何實現這個效果

<!doctype?html>

<html>

<head>

<style>

.taobao{width:224px;height:224px;?position:relative;?z-index:0;?overflow:hidden;?cursor:pointer}

.taobao.img{display:block;?position:relative;?z-index:0;}

.taobao?a{display:none;height:20px;?text-align:center;?background:red;?color:#fff;?text-decoration:none;?font-weight:bold;?font-family:"新宋體";?font-size:16px;?line-height:20px;?margin:auto?15px;?margin-top:-102px;?position:relative;?z-index:1000;}

.zhezao{opacity:0.2;?position:relative;z-index:100;height:100%;width:100%;?margin-top:-100%;?display:none;?background:#333}

.taobao:hover?a,?.taobao:hover?.zhezao{display:block;}

</style>

</head>

<body>

<div?class="taobao">

<img?src="1.png">

<div?class="zhezao"></div><a?href="#"?target="_blank">去淘寶購買</a>

</div>

</body>

</html>

隨便做了個演示，妳根據妳自己的要求完善壹下！