css hover 小demo

照片hover: 小动画

<div id='facebook'>
<span>
<img src="">
<i></i>
</span>
</div>

 

<style type="text/css">
#facebook span {
width: 38px;
display: inline-block;
border: 1px solid transparent;
height: 38px;
margin-left: -1px;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background-color: #FFF;
transition: all 0.3s;
}
#facebook span img {
height: 40px;
/*display: none;*/
width: 100%;
object-fit: cover;
max-width: none;
position: relative;
}
#facebook span i {
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg);
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));
z-index: 10;
}
#facebook span:hover i {
left: 100%;
transition: .5s;
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
}
</style>

转载于:https://www.cnblogs.com/QxkWeb/p/9437033.html