欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

图片黑色阴影

程序员文章站 2022-07-13 22:22:16
...

 .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>