A highlight light arc effect implemented using CSS3. When the mouse hovers over an element, a light arc flashes from left to right. The effect is as follows:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>light</title> <style> body{ margin: 0; } a.floor{ display: block; height: 475px; } a.floor:hover:before{ -webkit-transition: left 1.5s; -moz-transition: left 1.5s; transition: left 1.5s; left: 920px; } a.floor:before{ content: ""; position: absolute; width: 80px; height: 475px; top: 0; left: -150px; overflow: hidden; background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%); background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%); background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%); -webkit-transform: skewX(-25deg); -moz-transform: skewX(-25deg); } </style> </head> <body> <a href="javascript:;"> <img src="./images/girl.jpg" style="max-width:90%" width="760" alt=""> </a> </body> </html>