Image scanner effect using jquery or javascript for web page

Question

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.

Answer 1

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.