纯CSS3实现图片鼠标经过特效

有的时候，在前端网页钟显示许多图片列表，没有任何样式的话，显得很单调，其实我们会可以使用CSS添加一些简单的样式，类似动画效果。
HTML结构

<div class="bn_ad bn_ad_1 col-lg-4 col-xs-12">
    <a href="#" class="bna"><img src="http://blog.ilikecss.com/wp-content/uploads/2017/04/2017shanghaichezhan.jpg" alt="纯CSS3实现图片鼠标经过特效" alt="模特微信" width="800" height="600" class="aligncenter size-full wp-image-5353"></a>
</div>

CSS代码

.bn_ad a {
    display: block;
    height: 240px;
    box-shadow: 3px 3px #010101;
    border: 1px solid #010101;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.bn_ad_1 a {
    background-image: url(../img/tonggumeilin-1.jpg);
}.bna {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}
.bna:before {
    content: "";
    background-image: -webkit-linear-gradient(
      130deg,
      rgba(255,255,255,0) 20%, 
      rgba(243,235,255,1) 100%, 
      rgba(243,235,82,0) 80%
    );
    background-image: linear-gradient(
      130deg,
      rgba(243,235,255,0) 20%,
      rgba(243,235,255,1) 50%,
      rgba(243,235,255,0) 80%
    );
    width: 200%;
    height: 200%;
    position: absolute;
    top: -100%; 
    left: -200%;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.bna:hover:before {top: 0%; left: 100%;}

看看下面的演示效果吧。