直接使用代码

图片素材

无

css代码

       <style type="text/css">
  /*产品列表*/
  #gonglve{padding:40px 0; background:#E1FDE6; }
  #gonglve a{ position:relative;}
  #gonglve a p{ position:absolute; top:-10px; left:0; text-align:center; width:100%; font-size:30px; color:#fff}
 </style>

HTML+JS代码

       <div id="gonglve">
  <div class="container">
    <h4 class="pad-y30  text-center h3">产品中心</h4>
    <div class="row">
        <volist name='listProduct' id='vo'>
          <div class="col-md-4 pm my-item">
            <div class="pad5">
              <a>
                <img src="/public/images/img32.jpg" width="100%" />
                <p>测试文章标题</p>
              </a>
            </div>
          </div>
    </volist>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(function() {
    $("#gonglve a").hover(
      function() {
        $(this)
          .children("p")
          .css("color", "#F90");
        $(this)
          .children("img")
          .fadeTo(100, 0.5);
      },
      function() {
        $(this)
          .children("p")
          .css("color", "#fff");
        $(this)
          .children("img")
          .fadeTo(100, 1);
      }
    );
  });
</script>