Split Image Slider With CSS3 And SVG

Preview:

Description:

An awesome responsive fullscreen split image slider built using SVG patterns and several CSS3 properties.

How to use it:

Add the images to the slider following the markup structure like this:

<div class="main">
  <div class="slider">
    <svg class="slider__mask" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" width="0" height="0">
      <defs>
        <!-- Slide 1 -->
        <pattern id="bg1" patternUnits="userSpaceOnUse" width="1920" height="1080" viewBox="0 0 1920 1080">
          <image xlink:href="https://images.unsplash.com/photo-1454328911520-ccf83f1ef41d?dpr=1&auto=format&fit=crop&w=2000&h=2000&q=80&cs=tinysrgb&crop=&bg=" width="100%" height="100%"/>
        </pattern>
        <pattern id="pattern1l" patternUnits="userSpaceOnUse" width="562" height="366" viewBox="0 0 562 366">
          <image xlink:href="https://images.unsplash.com/photo-1454328911520-ccf83f1ef41d?dpr=1&auto=format&fit=crop&w=600&h=600&q=80&cs=tinysrgb&crop=&bg=" width="600px" height="600px"/>
        </pattern>
        <pattern id="pattern1r" patternUnits="userSpaceOnUse" x="365px" width="562" height="366" viewBox="0 0 562 366">
          <image xlink:href="https://images.unsplash.com/photo-1497215842964-222b430dc094?dpr=1&auto=format&fit=crop&w=600&h=600&q=80&cs=tinysrgb&crop=&bg=" width="600px" height="600px"/>
        </pattern>
        
        <!-- Slide 2 -->
        <pattern id="bg2" patternUnits="userSpaceOnUse" width="1920" height="1080" viewBox="0 0 1920 1080">
          <image xlink:href="https://images.unsplash.com/photo-1497377825569-02ad2f9edb81?dpr=1&auto=format&fit=crop&w=2000&h=2000&q=80&cs=tinysrgb&crop=&bg=" width="100%" height="100%"/>
        </pattern>
        <pattern id="pattern2l" patternUnits="userSpaceOnUse" width="562" height="366" viewBox="0 0 562 366">
          <image xlink:href="https://images.unsplash.com/photo-1497377825569-02ad2f9edb81?dpr=1&auto=format&fit=crop&w=600&h=600&q=80&cs=tinysrgb&crop=&bg=" width="600px" height="600px"/>
        </pattern>
        <pattern id="pattern2r" patternUnits="userSpaceOnUse" x="365" width="562" height="366" viewBox="0 0 562 366">
          <image xlink:href="https://images.unsplash.com/photo-1496060169243-453fde45943b?dpr=1&auto=format&fit=crop&w=600&h=600&q=80&cs=tinysrgb&crop=&bg=" width="600px" height="600px"/>
        </pattern>
      </defs>
    </svg>
    <div class="slide" id="slide-1">
      <svg class="slide__bg" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1920" height="1080">
        <rect x="0" y="0" width="1920" height="1080" fill="url(#bg1)" />
      </svg>
      <div class="slide__images">
        <div class="slide__image slide__image--left">
          <svg viewBox="0 0 900 365" version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px">
            <path d="M 0 0 L 0 365 L 351.2382 365 L 562 0 L 0 0 Z" fill="url(#pattern1l)"/>
          </svg>
        </div>
        <div class="slide__image slide__image--right">
          <svg viewBox="0 0 900 365" version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px">
            <path d="M 900 365 L 900 0 L 548.7618 0 L 338 365 L 900 365 Z" fill="url(#pattern1r)"/>
          </svg>
        </div>
      </div>
    </div>
    <div class="slide" id="slide-2">
      <svg class="slide__bg" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1920" height="1080">
        <rect x="0" y="0" width="1920" height="1080" fill="url(#bg2)" />
      </svg>
      <div class="slide__images">
        <div class="slide__image slide__image--left">
          <svg viewBox="0 0 900 365" version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px">
            <path d="M 0 0 L 0 365 L 351.2382 365 L 562 0 L 0 0 Z" fill="url(#pattern2l)"/>
          </svg>
        </div>
        <div class="slide__image slide__image--right">
          <svg viewBox="0 0 900 365" version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px">
            <path d="M 900 365 L 900 0 L 548.7618 0 L 338 365 L 900 365 Z" fill="url(#pattern2r)"/>
          </svg>
        </div>
      </div>
    </div>
    <div class="slider__pagination">
      <a href="#slide-1" class="button">Slide 1</a>
      <a href="#slide-2" class="button">Slide 2</a>
    </div>
  </div>
</div>

The primary CSS/CSS3 styles for the image slider.

.main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  text-align: left;
}
.slider {
  width: 100vw;
  height: 100vh;
}
.slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100vh;
  position: absolute;
  width: 100%;
}
.slide:target .slide__bg { opacity: 1; }
.slide:target .slide__image {
  -webkit-transform: translate(0);
  transform: translate(0);
  opacity: 1;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  -webkit-filter: blur(0) drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.35));
  filter: blur(0) drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.35));
}
.slide__bg {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(2);
  transform: translate(-50%, -50%) scale(2);
  -webkit-filter: blur(50px);
  filter: blur(50px);
  opacity: 0;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  will-change: opacity;
}
.slide__images {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 365px;
  margin: 0 20px;
}
.slide__image {
  position: absolute;
  width: 100%;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
  -webkit-filter: blur(10px) drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.35));
  filter: blur(10px) drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.35));
  will-change: transform, opacity, filter;
}
.slide__image svg { display: block; }
.slide__image--left {
  -webkit-transform: translate(0.75%, -10px);
  transform: translate(0.75%, -10px);
}
.slide__image--right {
  top: 5vmin;
  -webkit-transform: translate(-0.75%, 10px);
  transform: translate(-0.75%, 10px);
}

Style & position the pagination buttons.

.slider__pagination {
  position: absolute;
  bottom: 7vh;
  width: 100%;
  text-align: center;
}
.button {
  position: relative;
  display: inline-block;
  padding: 20px 40px;
  border: 2px solid #fff;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: white;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.button:hover {
  color: #333;
  background-color: white;
}

Force redirect to anchor:

window.location.href="#slide-1";