CSS3 glass streamer effect
<!-- Do not add <body> tags to HTML snippets //-->
<div id="container">
<div class="image">
<img src="http://ww4.sinaimg.cn/mw600/005vbOHfgw1ercvg85sr0j30jg0t6tdq.jpg"
alt="Hello World" />
<em></em>
</div>
</div>
<!-- Open source CDN is recommended to select external JS to be referenced //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js">
</script>
/*CSS source code*/
body{
background:#CFCFCF;
}
.image {
position: relative;
overflow:hidden;
width: 300px;
height: 450px;
}
img {
width:300px;
height: 450px;
}
in {
position: absolute;
display:block;
width: 200px;
height: 450px;
background:#fff;
top: 0;
left: -400px;
translate: -webkit-transform: skewY(25deg);
-moz-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
-o-transform: skewX(-25deg);
transform: skewX(-25deg);
background:linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
-moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
-webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
-o-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}
.image:hover on {
left:400px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
}
.