图片点击效果

第一：
<item>
      <name><![CDATA[cpcp]]></name>
      <tpl_default><![CDATA[{@}
      <div class="view11 third-effect11">
  <img src="{$=ii_get_actual_route('product/{$image}')}" alt="{$image}" />
  <div class="mask11"><a href="{$=ii_curl('{$baseurl}', ii_iurl('detail', {$id}, {$urltype}, 'folder={$createfolder};filetype={$createfiletype};time={$time}'))} " class="info11" >{$topic}</a></div>
  </div>
  {@}
]]></tpl_default>
    </item>

.third-effect11 { width: 270px; height: 220px; margin: 10px; overflow: hidden; position: relative; text-align: center; box-shadow: 0px 0px 5px rgb(170, 170, 170); cursor: default; float:left;}
.third-effect11 .mask11 { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0px; left: 0px; }


.third-effect11 .mask11 { opacity: 0; overflow: visible; border: 150px solid rgba(0, 0, 0, 0.7); box-sizing: border-box; transition: all 0.4s ease-in-out 0s; }
.third-effect11 a.info11 { position: relative; color:#ff0; left:-110px; width:200px; display:block; top: -50px; opacity: 0; transition: opacity 0.5s ease-in-out 0s; }
.third-effect11:hover .mask11 { opacity: 1; border: 150px solid rgba(0, 0, 0, 0.7); }
.third-effect11:hover a.info11 { opacity: 1; transition-delay: 0.3s; }

第二：

<li class="container"><img src="{$=ii_get_actual_route('images/ser6.jpg')}"><p>方案优化</p><span>OPTIMIZATION</span><div class="mask"><div class="dian"><a href="{$=ii_get_actual_route('aboutus')}?type=detail&id=6">点击查询</a></div></div></li>

<script type="text/javascript">

    $(".container").bind("mouseenter mouseleave",function(e) {
           var w = $(this).width();
           var h = $(this).height();
           var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
           var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
           //alert(x);
           var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
           //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
           var eventType = e.type;
           //alert(e.type);
           if(e.type == 'mouseenter'){
              if(direction==0){
                  $(this).find('.mask').css({'display':'block','top':-h+'px','left':'0px'}).animate({'top':'0px'});
              }else if(direction==1){
                  $(this).find('.mask').css({'display':'block','left':w+'px','top':'0px'}).animate({'left':'0px'});
              }else if(direction==2){
                  $(this).find('.mask').css({'display':'block','top':h+'px','left':'0px'}).animate({'top':'0px'});
              }else if(direction==3){
                  $(this).find('.mask').css({'display':'block','left':-w+'px','top':'0px'}).animate({'left':'0px'});
              }
          }else{
              if(direction==0){
                  $(this).find('.mask').animate({'top':-h+'px'});
              }else if(direction==1){
                  $(this).find('.mask').animate({'left':w+'px'});
              }else if(direction==2){
                  $(this).find('.mask').animate({'top':h+'px'});
              }else if(direction==3){
                  $(this).find('.mask').animate({'left':-w+'px'});
              }
          }
      });
</script>

.container{width:220px;height:210px;float:left;position: relative;overflow: hidden;}
.mask{width:100%;height:100%;background:#7a7a7a;position: absolute;display: none;opacity:0.5; }
.server ul li img{ margin-top:50px;}
.dian{ width:65px; height:20px;  border:1px solid #b7b944; border-radius:6px; margin-top:100px; }
.dian a{color:#b7b944;}