<div class="img">
  <img src="__TMPL__/Public/Image/tp1.jpg" width="170" height="90" alt="">
  <div class="svg">
    <svg height="90" width="170" xmlns="http://www.w3.org/2000/svg">
      <rect class="rect" width="170" height="90" />
    </svg>
    </div>
</div>

a { display: block;
      .img { width: 170px; height: 90px; position: relative;
        img { display: block; .transition(); }
        .svg { width: 100%; height: 100%; position: absolute; left: 0; top: 0;
          .rect { stroke:@color; fill:transparent; .transition(0.5s); stroke-width: 5px; stroke-dasharray:0 50; stroke-dashoffset:0; }
        }
      }
      small { display: block; text-align: center; font-size: 16px; color: #222; line-height: 40px; .transition(); }
      &:hover {
        .img{
          img { .transform(0.97); }
          .svg .rect { stroke-dasharray:100 0; }
        }
      }
    }