I need to develop a section for website where I need to show a scanner kind of effect on the image selected.
It would be something similar to: http://blog.gabrieleromanato.com/2011/11/jquery-scanner-effect-on-a-slideshow/
What I need is a image in dark and a vertical light effect which goes from left to right on the image and I display the parts of the image below the light source. Once the light travels past any section, it turns dark again.
Please advise.
I see two choices, depending on the browser support you want, you could animate a CSS gradient in a div over your image, your gradient being something like
linear-gradient(to right, black x%, transparent (x+w)%, black)
x being the start of your lightning effect and w it's width (you animate on x). Of course you might use some little transparency on your black
You could as well use three divs over your image : one black of width x, one transparent of width w, and another black to the end, and animate the three divs.