%section
  .slider.arizona-dreams
    - %w(qvO4yjZo-Mc 4xv3lqnanYc _TC_gkSQ7IU 4vm6v0KmCS8).each do |image|
      .slide
        %img.fadein.lazyload{:alt => "", 'data-src' => "https://source.unsplash.com/#{image}/800x600", 'src' => "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20#{800}%20#{600}'%20%2F%3E", width: 800, height: 600}

-# https://codepen.io/dudleystorey/pen/HkwBo
%section
  .slider.before-after
    - %w(before after).each do |item|
      .slide
        %img.fadein.lazyload{:alt => "", "data-srcset" => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-#{item}.jpg", :src => "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20661%20661'%20%2F%3E", width: 661, height: 661}



-# %section
-#   .slider.product
-#     - {none: 'full-no-bg', light: 'full-bg-light', dark: 'full-bg-dark'}.each do |term,image|
-#       %a.slide{href: "http://demo.mobilemarkup.com/calibration/?background=#{term}", target: '_blank'}
-#         %img.fadein.lazyload{:alt => "", "data-srcset" => "https://mobilemarkup.com/images/calibration/#{image}.png", :height => "3156", :src => "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%202880%203156'%20%2F%3E", :width => "2880"}
View Compiled
section
  padding: 20px
  box-sizing: border-box
  text-align: center
  
  @media (min-width: 700px)
    min-height: 100vh
    display: flex
    align-items: center
    justify-content: center
    
  &:first-child
    background-color: black
  &:nth-child(2)
    background-color: mix(black,white)
  
img
  max-width: 100%
  height: auto
  
.fadein
  opacity: 0
  transition: opacity .3s ease-in-out

  &.lazyloaded
    opacity: 1
  
.slider
  position: relative
  margin: 0 auto
  overflow: hidden
  border-radius: .25rem
  box-shadow: 0 1px 2px 0px rgba(black,.5)
  .slide
    pointer-events: none
    display: block
    img
      display: block
      transition: all .5s ease
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    ~ .slide
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      
    &:before
      content: ''
      position: absolute
      top: 0
      left: 0
      height: 100%
      z-index: 2
      pointer-events: initial

    @for $i from 2 through 4
      &:first-child:nth-last-child(#{$i})
        &, & ~ *
          &:before
            width: percentage(1/$i)

        $s: ''
        @for $j from 1 through $i - 1
          $s: $s + ' + *'
          #{"&#{$s}"}
            img
              clip-path: polygon(percentage($j/$i) 0, percentage(($j+1)/$i) 0, percentage(($j+1)/$i) 100%, percentage($j/$i) 100%)
            &:before
              left: percentage($j/$i)


  &:hover
    .slide img
      clip-path: polygon(0% 0, 0% 0, 0% 100%, 0% 100%)!important

  .slide:hover
    img
      clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%)!important

    ~ .slide img
      clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%)!important
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.0.1/lazysizes.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.0.1/plugins/respimg/ls.respimg.min.js
  3. https://codepen.io/mican/pen/XgRmNr.js