Time for action – creating the overlay images

Next we should create an almost exact copy of each image on the page to use as an overlay:

$(".expander").each(function(i) {

  var expander = $(this),
    coords = expander.offset(),
    copy = $("<img>", {
      id: expander.attr("id").split("-")[0],
      src: expander.attr("src"),
      width: expander.width(),
      height: expander.height()
    });

What just happened?

In this part of the <script>, we select each image on the page and process them using jQuery's each() method. We set some variables, caching a reference to the current image and storing its coordinates on the page relative to the document using the jQuery offset() method.

We then create a new image for each existing image on the page, giving it an id attribute that pairs it with the image it is overlaying, the src of the original image, and the width and height of the original image. We use the JavaScript split() function to remove the part of the string that says...