<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>


 <div id="timemachine"> 
<h1> Andy's time machine </h1>
<p>Mix the old and new with Andy's time machine </p>

<div id="holder">
     <div id="new">
       <!-- don't worry about the weird img src here-->
       <!-- I'm using google drive to host the images-->
       <!-- Replace these with the images you want to use-->
       <!-- The modern image here -->
       <img src="https://drive.google.com/uc?export=view&id=0B1Gp8j4WdzDgc0duVnpzZU5sS28" />
     </div>
      <!-- The old image here. -->
     <div id ="old" class="overlay">
      <img src="https://drive.google.com/uc?export=view&id=0B1Gp8j4WdzDgX0RNX3E0a3JzazQ" />
     </div>
  
</div>

 <p>Move the slider to go back in time</p>

 <div id="slider"></div>

</div>
 
@import url("//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css");

#timemachine {
  width:80%;
  
}

#holder {
  position:relative;
  
}

#old{  
  opacity:0;
  filter:alpha(opacity=100); /* For IE8 and earlier */
 
}

#new {
    width:100%;
    
    overflow:auto;
}

#new img {
    max-width:100%;
    max-height:100%;
}

#old img {
  max-width:100%; max-height:100%;
}


.overlay {
  
  position: absolute;
  top:0;
}

#slider  { 
  width:90%;
  margin:auto;
}
function fadeImage() {
    var opacity =$("#slider").slider("value");
    $("#old").css( "opacity", opacity);
}

$(function() {
    $( "#slider" ).slider(
    {
      range: "max",
      min: 0,
      max: 1,
      value: 0,
      step: .05,
      slide: fadeImage,
      change: fadeImage
    }
    
    );
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.