<div class="demo">
  <div class="demo__lay-3-1 demo__lay">
    <div inFrameIndex="1" class="demo__lay-3-1-picture demo__lay-3-1-picture--1 inactive">
      <div class="demo__lay-inner">
        <div class="demo__content">
           Whatever
        </div>
      </div>
    </div>
    <div inFrameIndex="2" class="demo__lay-3-1-picture demo__lay-3-1-picture--2 inactive">
      <div class="demo__lay-inner">
        <div class="demo__content">
        Something 
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit mollitia fugit magnam, atque architecto. Officia nisi possimus architecto cumque neque eius magni vero tempora harum laboriosam, cupiditate, officiis expedita suscipit.  
        </p>  
        </div>
      </div>
    </div>
    <div inFrameIndex="3" class="demo__lay-3-1-picture demo__lay-3-1-picture--3 inactive">
      <div class="demo__lay-inner">
        <div class="demo__content">
          Check out my other <a target="_blank" href="https://codepen.io/kiyutink/"> pens</a> and follow me on <a target="_blank" href="https://twitter.com/kiyutin_k"> twitter</a>
        </div>
      </div>
    </div>
  </div>
</div>
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.demo {
  width: 100vw;
  height: 100vh;
  
  background: #ccc;
  
  overflow: hidden;
  
  &__lay {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  &__lay-inner {
    width: 100%;
    height: 100%;
    padding: 1px;
    display: flex;
    align-items: center;
    justify-content: center;    
    
    background-size: cover;
    background-position: center;
    
    transition: all 0.4s ease-out;
    will-change: transform;
  }
  
  &__lay-3-1-picture {
    position: absolute;    
    top: 0;
    left: 0;
    width: 90vw;
    height: 90vh;
    
    transition: all 0.4s ease-out;
    will-change: transform;
    overflow: hidden;
    cursor: pointer;
    
    &:after {
      position: absolute;
      left: 0;
      top: 0;

      display: block;
      height: 100%;
      width: 100%;

      background-color: black;

      z-index: 1;
      content: "";
      opacity: 0.6;
      transition: all 0.4s linear;
      will-change: opacity;
    }
    
    &--1 {      
      border-right: 3px solid white;
      border-bottom: 3px solid white;
      
      transform: translate3d(-40vw, -40vh, 0);
      
      & .demo__lay-inner {        
        background-image: url(https://kiyutink.github.io/nyc/nyc3.jpg);      
      }
      
      
      &.active {
        transform: none;        
        
        & .demo__lay-inner {
          transform: none;
        }
      }
      
      &.inactive-2 {
        transform: translate3d(0, -80vh, 0);        
        
        & .demo__lay-inner {
          transform: translate3d(0, 20vh, 0);
        }
      }
      
      &.inactive-3 {
        transform: translate3d(-80vw, -40vh, 0);
        
        & .demo__lay-inner {
          transform: translate3d(20vw, 20vh, 0);
        }
      }
    }
    
    &--2 {      
      border-right: 3px solid white;
      border-top: 3px solid white;      
      
      transform: translate3d(-40vw, 50vh, 0);
      
      & .demo__lay-inner {        
        background-image: url(https://kiyutink.github.io/london/london1.jpg);      
      }
      
      &.active {
        transform: translate3d(0, 10vh, 0);
        
        & .demo__lay-inner {
          transform: none;
        }
      }
      
      &.inactive-1 {
        transform: translate3d(0, 90vh, 0);
        
        & .demo__lay-inner {
          transform: translate3d(0, -20vh, 0);
        }
      }
      
      &.inactive-3 {
        transform: translate3d(-80vw, 50vh, 0);
        
        & .demo__lay-inner {
          transform: translate3d(20vw, -20vh, 0);
        }
      }
    }
    
    &--3 {
      height: 100%;
      border-left: 3px solid white;
      
      transform: translate3d(50vw, 0, 0);
      
     & .demo__lay-inner {        
        background-image: url(https://kiyutink.github.io/moscow/moscow1.jpg);      
      }
      
      &.active {
        transform: translate3d(10vw, 0, 0);
        
        & .demo__lay-inner {
          transform: none;
        }
      }
      
      &.inactive-1 {
        transform: translate3d(90vw, 0, 0);
        
        & .demo__lay-inner {
          transform: translate3d(-20vw, 0, 0);
        }
      }
      
      &.inactive-2 {
        transform: translate3d(90vw, 0, 0);
        
        & .demo__lay-inner {
          transform: translate3d(-30vw, 0, 0);
        }
      }
    }
  }
  
  &__content {
    max-width: 80%;
    padding: 10px;
    
    text-align: center;    
    font-family: "Montserrat", "Helvetica", sans-serif;
    line-height: 1.3;
    font-size: 26px;
    
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    
    border-radius: 5px;
    transition: all 0.25s ease-out;
    transition-delay: 0.25s;
    
    & p {
      font-size: 15px;
    }
    
    & a {
      color: white;
      
      &:hover {
        color: #FFA4A4;
      }
    }
  }
}

.active {  
  &:after {
    opacity: 0;
    pointer-events: none;
  }
  
  & .demo__content {
    opacity: 1;
    transform: none;
    cursor: auto;
  }
}

.inactive {
  &:after {
    opacity: 0.7;
    pointer-events: auto;
  }
  
  & .demo__content {
    opacity: 0;
    transform: translate3d(0, 35px, 0);
    transition-delay: 0s;
  }
}

.inanimatable {
  transition: none;
}
"use strict";

$(document).ready(function() {

  var $pic_3_1 = $(".demo__lay-3-1-picture");
  var curPic = 0;
  var timeout = null;

  $pic_3_1.on("click", function() {
    
    var self = this;
    curPic = +$(this).attr("inFrameIndex") - 1;
    
    $pic_3_1.removeClass("inanimatable");
    
    $pic_3_1.removeClass("active inactive inactive-1 inactive-2 inactive-3").addClass("inactive inactive-" + $(self).attr("inFrameIndex"));
    
    $(self).addClass("active").removeClass("inactive");
    
    clearTimeout(timeout);

    timeout = setTimeout(function() {
      $pic_3_1.eq(curPic).trigger("click");
      if (curPic >= 2) curPic = 0;
      else curPic++;
    }, 10000);
  });
  
  $(window).on("resize", function() {
    $pic_3_1.addClass("inanimatable");
  });
  
  //this is here just so it will animate in the iframe and attract more attention :) 
  setTimeout(function() {
    $pic_3_1.eq(Math.floor(Math.random() * 3)).trigger("click");
  }, 400);

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js