css3鼠标悬停图片边框线条动画特效

css3鼠标经过内容区时，边框线条特效效果制作。 html:

<div class="strength grWidth hidden"><div class="homeTitle"><h2>为什么选择优胜空间？</h2></div><ul class="strengthMain"><li><a href="#"><img src="images/a1.jpg" alt="专业团队"><div class="font"><h3>专业团队</h3><p>面积1900平，成员300人，很可能是常德最大的一支网站信息建设服务团队</p></div></a></li><li><a href="#"><img src="images/a2.jpg" alt="项目管理"><div class="font"><h3>项目管理</h3><p>项目式实施，确保创意与策略可靠落地</p></div></a></li><li><a href="#"><img src="images/a3.jpg" alt="丰富经验"><div class="font"><h3>丰富经验</h3><p>行业经验，累计帮助超过千家企业建设了官方网站</p></div></a></li><li><a href="#"><img src="images/a4.jpg" alt="技术支持"><div class="font"><h3>售后无忧</h3><p>7X24小时VIP服务专线，直通技术支持</p></div></a></li></ul></div>

css:

/* CSS活动的公共样式 */.fl{float:left;}.fr{float:right;}.gr_center{text-align:center;}.grWidth{width:1200px; margin:0 auto;}.mb10{margin-bottom:10px;}.mb15{margin-bottom:15px;}.center{text-align:center;}.hidden{overflow:hidden;}.nor{font-weight:normal;}/* 标题 */.homeTitle {text-align: center;margin-bottom: 35px;text-transform: uppercase;line-height: 40px;}.homeTitle h2 {font-size: 36px;color: #FF0000;font-weight: normal;}.strength{padding-top:60px;}.strengthMain{height:;overflow:hidden;}.strengthMain li{float:left;width:600px;height:330px;overflow:hidden;background:#000;position:relative;}.strengthMain li img{width:600px;height:330px;transition:all .5s;opacity:0.4;filter:alpha(opacity=40);}.strengthMain li .font{width:600px;height:205px;top:0;left:0;position:absolute;color:#fff;text-align:center;font-size:16px;padding-top:125px;}.strengthMain li .font h3{font-size:36px;color:#fff;font-weight:normal;margin-bottom:20px;line-height:36px;}.strengthMain li:hover img{transform: scale(1.05, 1.05);}

/*以下代码比较重要，是动画形成的重要关键一步*/.strengthMain li .font::before,.strengthMain li .font::after{position:absolute;content:'';opacity:0;transition:all 0.5s;}.strengthMain li .font::before{top:25px;right:15px;bottom:25px;left:15px;border-top:1px solid #fff;border-bottom:1px solid #fff;transform:scale(0,1);-webkit-transform-origin:0 0;transform-origin:0 0}.strengthMain li .font::after{top:15px;right:25px;bottom:15px;left:25px;border-right:1px solid #fff;border-left:1px solid #fff;transform:scale(1,0);transform-origin:100% 0;}.strengthMain li:hover .font::before,.strengthMain li:hover .font::after{opacity:1;transform:scale(1);transition: all 0.5s;}