How can I slide a image up and down over a background image to create a scanning effect?

Tags: javascript,jquery,css

Problem :

I can across a nicely done scanning effect (on GTmetrix), where the image moves up and down over a background image.

They are using JavaScript to do this, but I wonder if this can be done with CSS, or if not how can I make this with JavaScript?

My code would be:

  #screenshot {
    margin: 8px auto 0 auto;
    border-radius: 8px;
    border: 2px solid #e4e4e4;
    width: 300px;
    height: 225px;
    background: url("background-box.png") no-repeat center center;
    position: relative;

  #scanner {
    position: absolute;
    top: -7px;
    left: -19px;

<div id="screenshot">
  <img src="scanner.png" alt="" id="scanner" />

Solution :

If you want to do it with javascript here is an working example for you what i made it. You must use jquery for catch scanner div. Its endless animation and you can change speed and height.Speed must be miliseconds(1000ms is 1 sec) animatescanner(height,speed);

Link :

Javascript :

x = 0;
function animatescanner(height,speed){
setInterval(function(){ animateit(height); },speed);
function animateit(height){

Dont forget to include jquery.

    CSS Howto..

    how to give multiple colors in the same cell in a full calendar?

    How to remove white border from blur background image

    How to have the class=“selected” depending on what the current page/url is

    How to access two Ids in one css selector

    How to reload CSS after ajax call

    How to define alternative font-family corresponding to font-size CSS

    How to get image info from css into MasterPage'gridview?

    How to reuse css styles from Telerik RadControls for ASP.NET Ajax

    How to style a