<section class="parent-container two-column-grid">
  
  
  
    <!-- BEGIN BEFORE AFTER SLIDER MARKUP 
         Other markup is for demo. -->

  <div class="before-after-container">

    <figure>
      <div id="before_after"></div>
    </figure>
    <input oninput="beforeAfter()" onchange="beforeAfter()" type="range" min="0" max="100" value="50" id="before_after_slider" />
  </div>
  
    <!-- // END BEFORE AFTER SLIDER MARKUP  -->
  
  
  

  <article>
    <h2>Before & After Image</h2>
    <p>Responsive before and after image comparison slider.  Vanilla Javascript and simple markup.</p>
      <p>Slider and background image dimensions set as aspect ratio.</p>  
    
    <p>Original JS function forked from Josetxu

---> https://codepen.io/josetxu/pen/mJbmZY</p>
    
    <p><a title="Background Image Using CSS variables" href="https://codepen.io/mark_sottek/pen/QWmwaZV" target="_blank">VERSION TWO -  Background images lazyloaded via data attributes.</a></p>


    <p> Photo is a restoration for a friend.  Original - source photo was a tiny, low resolution JPG she found on Ancestry.  Necessity taught me some amazing photo restoration tricks when hurricane Katrina put the hurt on New Orleans. I got stories. </p>
  </article>

</section>

/* SIMPLE BEFORE & AFTER IMAGE COMPARISON SLIDER 

Original JS function forked from Josetxu

---> https://codepen.io/josetxu/pen/mJbmZY

Responsive before and after image comparison slider. Vanilla Javascript and minimal markup.

Slider and background image dimensions set as aspect ratio.

Photo is a restoration for a friend. Original - source photo was a
tiny, low resolution JPG she found on Ancestry. Necessity taught me some amazing photo restoration tricks when hurricane Katrina put the hurt on New Orleans. I got stories.  */


:root {
  /* Set aspect ratio for .before-after-container.  
     Background images need to be same aspect ratio as container in pixels. 
     Handy tool to get aspect ratio for any image dimension.
  
    ---> https://www.digitalrebellion.com/webapps/aspectcalc
  
  Aspect Ratios on CSS Tricks
   ----> https://css-tricks.com/almanac/properties/a/aspect-ratio/
  
     */

  --before-after-aspect-ratio: 1 / 1;    /* <--- Square 1080px x 1080px */

  /* Before and After Images */
  --before-image: url(https://assets.codepen.io/191814/Original-Resized--Great-Grandfather.jpg);
  --after-image: url(https://assets.codepen.io/191814/Repaired-Sharpened-Great-Grandfather.jpg);

  /** **************
  
  Example with a 16 / 9 ratio 
    --before-after-aspect-ratio: 16 / 9;
    --before-image: url(https://assets.codepen.io/191814/16-9-original-Great-Grandfather.jpg);
    --after-image: url(https://assets.codepen.io/191814/16-9-Repaired-Sharpened-Great-Grandfather.jpg);
  
**************** */

  /* Before After Container Background Color  */
  --before-after-background-color: #1f1f1c;
}

.before-after-container {
  aspect-ratio: var(--before-after-aspect-ratio);
  background: var(--before-after-background-color);
  width: 100%;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.before-after-container figure {
  background-image: var(--after-image);
  position: relative;
  margin: 0;
  background-size: cover;
  width: 100%;
  height: 100%;
}
#before_after {
  background-image: var(--before-image);
  background-size: cover;
  bottom: 0;
  border-right: 5px solid rgba(255, 255, 255, 0.7);
  box-shadow: 10px 0 15px -13px #000;
  height: 100%;
  max-width: 98.6%;
  min-width: 0.6%;
  overflow: visible;
  position: absolute;
  width: 50%;
  animation: first 2s 1 normal ease-in-out 0.1s;
  -webkit-animation: first 2s 1 normal ease-in-out 0.1s;
}
input#before_after_slider {
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  cursor: col-resize;
  height: 100vw;
  left: 0;
  margin: 0;
  outline: none;
  padding: 0;
  position: relative;
  top: -100vw;
  width: 100%;
}
input#before_after_slider::-moz-range-track {
  background: transparent;
}
input#before_after_slider::-ms-track {
  border: none;
  background-color: transparent;
  height: 100vw;
  left: 0;
  top: -100vw;
  width: 100%;
  margin: 0;
  padding: 0;
    outline: none;
  position: relative;
  cursor: col-resize;
  color: transparent;
}
input#before_after_slider::-ms-fill-lower {
  background-color: transparent;
}
input#before_after_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 100vw;
  width: 0.5%;
  opacity: 0;
}
input#before_after_slider::-moz-range-thumb {
  -moz-appearance: none;
  height: 100vw;
  width: 0.5%;
  opacity: 0;
}
input#before_after_slider::-ms-thumb {
  height: 100vw;
  width: 0.5%;
  opacity: 0;
}
input#before_after_slider::-ms-tooltip {
  display: none;
}
#before_after::before {
  background: url(https://assets.codepen.io/191814/comparision.png) no-repeat
    scroll 0 center transparent;
  background-size: contain;
  content: " ";
  float: right;
  height: 100%;
  margin-right: -34px;
  position: relative;
  top: 0;
  width: 64px;
}
@keyframes first {
  0% {
    width: 0%;
  }
  50% {
    width: 80%;
  }
  100% {
    width: 50%;
  }
}
@-webkit-keyframes first {
  0% {
    width: 0%;
  }
  50% {
    width: 80%;
  }
  100% {
    width: 50%;
  }
}

/* Demo Page Stuff */
body {
  margin: 0;
  background: var(--before-after-background-color);
    font-family: helvetica;
  padding-bottom:300px;
}
a {color:white;}
a:hover{color:red;}
article {	display: grid;
	align-content: center;
padding:25px;}
h2 {
  color: white;
  text-transform: uppercase;
  font-size: 1.5vw;
  letter-spacing: 5px;
  line-height:1;
  margin:0;
}
p {color:white;font-size:1vw;}

.parent-container {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  padding-top: 90px;
}

.two-column-grid {
  display: grid;
  grid-gap: 0px;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
}

@media only screen and (max-width: 980px) {

  .two-column-grid {
    grid-template-columns: 1fr;
  }
  h2 {
  color: white;
  text-transform: uppercase;
  font-size: 21px;
  letter-spacing: 1px;
  line-height:1;
  margin:0;
}
p {color:white;font-size:16px;}

}



/* ===================================================*
    
     ."".    ."",       
     |  |   /  /
     |  |  /  /
     |  | /  /
     |  |/  ;-._ 
     }  ` _/  / ;
     |  /` ) /  /             PEACE, LOVE & PHOTOSHOP
     | /  /_/\_/\
     |/  /      |           Mark in New Orleans
     (  ' \ '-  |
      \    `.  /
       |      |
       |      |

	
	
/* ===================================================*/

// BEFORE AFTER FUNCTION

function beforeAfter() {
      document.getElementById("before_after").style.width =
    document.getElementById("before_after_slider").value + "%";
}



 

            
    








Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.