怎样实现鼠标悬停效果？

最朴素的思路就是在图片上添加一层图标样式然后隐藏起来（opacity:0;）
然后把icon的hover样式的透明度设置成0.5
html代码：
css代码：

  <style>
    @font-face {
      font-family: 'iconfont';  /* project id 307904 */
      src: url('//at.alicdn.com/t/font_6zk386ul6ufvfgvi.eot');
      src: url('//at.alicdn.com/t/font_6zk386ul6ufvfgvi.eot?#iefix') format('embedded-opentype'),
      url('//at.alicdn.com/t/font_6zk386ul6ufvfgvi.woff') format('woff'),
      url('//at.alicdn.com/t/font_6zk386ul6ufvfgvi.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_6zk386ul6ufvfgvi.svg#iconfont') format('svg');
}
    a{
      display:inline-block;
      width: 200px;
      height: 300px;
      text-decoration:none;
      position:relative;
    }
    img{
      width: 200px;
      height:300px;
    } 
    .cover{
      width: 200px;
      height: 300px;
      background:rgba(252,192,57,.6);
      position:absolute;
      top:0;
      left:0;
      opacity:0;
      color:#fff;
      transition:.6s;
    }
    .cover:hover{
      opacity:.6;
    }
    .cover>span{
      font-family: 'iconfont';
      position:absolute;
      left:38%;
      font-size:50px;
      line-height:300px;
    }
  </style>

html:

<a href="#">
        ![](http://upload-images.jianshu.io/upload_images/5641465-34924ac69ed08660.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        <span class="cover">
          <span>&#xe610;</span>
        </span>
      </a>

预览