HTML结构

<a class="pic" href="#">
	<img src="../images/test.jpg" />
	<div class="hover">
		<div class="bg"></div>
		<div class="content">我是不透明的内容</div>
	</div>
</a>
						

CSS样式

.pic{width:180px; height:180px; display:block; position:relative;}
.hover{display:none;}
.pic:hover{zoom:1; cursor:pointer;}
.pic:hover .hover{display:block; position:absolute; top:0; left:0; z-index:9; }
.hover .bg{width:180px; height:180px; background:#000; opacity:.75; filter:alpha(opacity=75);}
.hover .content{width:180px; height:180px; position:absolute; top:0; left:0; color:#fff; z-index:99;}