图片墨色阴影

?.event{
?padding:0;
??? width:460px;
??? min-width: 460px;
??? border:0px solid #e4e4e4;
??? height: 350px;
??? min-height: 350px;
??? position: relative;
}
.event img{height:300px;width:460px;border: 0;}
?.event .title{
?background: #95c04c;
?color:white;
?width:100%;
?height:32px;
?padding:6px 6px 6px 8px;
?margin-left:0;
?margin-top:8px;
}
.imgGrayCover{
display: none;width: 100%;position: absolute;top: 0;left: 0;padding: 10px;background: #000;background: rgba(0, 0, 0, .5);z-index: 8085;text-shadow:none;height:300px;
}

<!-- pull-right、pull-left 、thumbnail为bootstrap的样式-->

?<div class="event pull-left thumbnail">
??????????<div class="imgGrayCover"></div>
???????? ?<img src="../img/index/onshow.jpg" alt="活动预告"/>
???????? ?<div class="title">
???????? ??<span class="pull-left">活动预告</span>
???????? ??<span class="pull-right">+</span>
???????? ?</div>
???????? </div>

<script type="text/javascript">
??$(function(){
???$('.eventEntry .event').hover(function(){
????$(this).find('.imgGrayCover').show();
???},function(){
????$(this).find('.imgGrayCover').hide();
???});
??});
?</script>