Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="clip">
<div class="wrap">
<img src='https://images.unsplash.com/photo-1544568100-847a948585b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1517423440428-a5a00ad493e8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1510771463146-e89e6e86560e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1518717758536-85ae29035b6d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1535930891776-0c2dfb7fda1a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1504595403659-9088ce801e29?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
</div>
              
            
!

CSS

              
                body{
  display:grid;
  place-items:center;
  height:100vh;
  width:100vw;
  perspective:100vw;
  position:relative;
  overflow:hidden;
  cursor: none;
  background:linear-gradient(to bottom, #666 50%, transparent 50%);
  &.ready:hover{
    &:after{
      animation:flicker 0.1s ease-in-out 4 alternate forwards, flicker2 0.65s ease-in-out 1 forwards;
      animation-delay:0.3s, 1s;
      transition:0.2s ease-in-out;
      color:transparent;
      @keyframes flicker{
        from{
          opacity:1;
        }
        to{
          opacity:0.05;
        }
      }
      @keyframes flicker2{
        from{
          opacity:1;
        }
        to{
          opacity:0;
        }
      }
    }
  }
  &:before, &:after{
    content:'';
    position:absolute;
    pointer-events:none;
    z-index:999;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:linear-gradient(to right, #000, transparent 10%, transparent 90%, #000);
    transform-style:preserve-3d;
    transform: translateZ(5vw);
  }
  &:after{
    content:'hover me';
    font-family:"Playfair Display";
    color:#666;
    font-size:2.5vw;
    display:grid;
    place-items:center;
    background:#000;
    transition:1s ease-in-out;
    transition-delay:0.4s;
    opacity:1;
  }
  &.zoom{
    .clip{
      transform:translateZ(50vw);
      transition:transform 1s ease-in-out;
      .wrap{
        .pic{
            @for $i from 1 through 10{
            &:nth-of-type(#{$i}){
              transform:rotate(calc(#{((4 - $i) * 36)}deg - var(--zoom)));
            }
          }
        }
      }
    }
  }
  &.active{
    animation:cursor 0s linear 1 forwards;
    animation-delay:1s;
    @keyframes cursor{
      to{
        cursor:pointer;
      }
    }
    .clip{
      &:before{
        transform:translateZ(60vw) rotate(0) skewY(var(--rotate2)) translateY(1vh) translateX(-1.25vw);
        transition:transform 0.2s ease-in-out;
      }
    }
    &.zoom{
      .clip{
        &:before{
          opacity:0;
          transition:opacity 0.5s ease-in-out;
        }
      }
    }
  }
  *{
    box-sizing:border-box;
    transform-style:preserve-3d;
    backface-visibility:hidden;
    &:before, &:after{
      transform-style:preserve-3d;
    }
  }
  .clip, .wrap{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
  }
  .clip{
    transform-style:preserve-3d;
    pointer-events:none;
    transition:0.1s ease-in-out;
    &:before{
      content:'';
      position:absolute;
      width:100%;
      height:100%;
      background:#000;
      z-index:9;
      top:0;
      left:0;
      mask:var(--clip);
      transform:translateZ(40vw) rotate(calc(var(--rotate2)/4)) skewY(var(--rotate2)) translateX(var(--x)) translateY(var(--y));
      pointer-events:none;
      transform-origin:50% 100%;
      transition:transform 0.1s linear;
    }
    *{
      transform-style:preserve-3d;
    }
    .wrap{
      display:grid;
      place-items:center;
      will-change:transform;
      transform: translateZ(70vw) rotateX(var(--rotateY)) rotate(var(--rotateWrap));
      transition:transform linear;
      backface-visibility:visible;
      .pic{
        display:grid;
        place-items:center;
        position:absolute;
        width:50vw;
        left:calc(50% + 50vw);
        transform-origin:-50vw 50%;
        pointer-events:all;
        backface-visibility:visible;
        .panel{
          display:inline-block;
          position:absolute;
          width:50%;
          height:auto;
          left:25%;
          top:auto;
          transform:rotate(90deg) rotateX(90deg);
          pointer-events:all;
          backface-visibility:visible;
          &:before, &:after{
            content:'';
            position:absolute;
            width:200%;
            height:100vh;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%) rotateX(90deg);
            transform-origin:50% 95%;
            background:url('https://puu.sh/F2bms/5e65955562.jpg');
            box-shadow:inset 0 -10vw 20vw -5vw rgba(0,0,0,0.75);
          }
          &:after{
            background:url('data:image/png;base64,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') 50% 50% / 15px 15px, linear-gradient(to bottom, darken(#b0926d, 35%) 10%, transparent 45%), linear-gradient(to right, darken(#b0926d, 15%), 
#b0926d, darken(#b0926d, 15%));
            transform-origin:50% 5%;
            transform:translate(-50%, -50%) rotateX(-90deg);
            box-shadow:inset 0 -10vw 20vw -5vw rgba(0,0,0,0.25);
          }
          div{
            content:'';
            position:absolute;
            width:100%;
            height:100%;
            top:0;
            left:0;
            pointer-events:all;
            backface-visibility:visible;
            span {
                position: absolute;
                text-align:center;
                font-size: 1.15vmin;
                transform: translateZ(-5vmin) translateX(-50%) scaleX(-1) scale(0.75);
                left: 50%;
                top: calc(100% + 0.5vmin);
                color: rgba(0,0,0,0.5);
                text-shadow:0.075vmin -0.075vmin 0 rgba(0,0,0,0.5);
                margin: 0;
                padding: 1.15vmin;
                filter:saturate(0.5);
                background: linear-gradient(75deg, transparent 35%, rgba(255,255,255, 0.2) 47%, rgba(255,255,255,0.2) 53%, transparent 65%), linear-gradient(to bottom, rgba(148,112,0,0.5), rgba(148,112,0,0.25), rgba(148,112,0,0.5)), lighten(rgb(148,112,0), 10%);
                background-size:75% 100%, 100% 100%, 100% 100%;
                background-position:var(--bg) 50%, 50% 50%, 50% 50%;
                font-family: 'Playfair Display';
              box-shadow:inset 0 0 0 0.35vmin darken(rgb(185,164,19), 20%), inset 0 0 0 0.36vmin darken(rgb(185,164,19), 40%);
              mask:radial-gradient(circle at top right, transparent 5%, #fff 5%, #fff 55%, transparent 55%) 50% 0% / 100% 55% no-repeat, radial-gradient(circle at top left, transparent 5%, #fff 5%, #fff 55%, transparent 55%) 50% 0% / 100% 55% no-repeat, radial-gradient(circle at bottom left, transparent 5%, #fff 5%, #fff 55%, transparent 55%) 50% 100% / 100% 55% no-repeat, radial-gradient(circle at bottom right, transparent 5%, #fff 5%, #fff 55%, transparent 55%) 50% 100% / 100% 55% no-repeat;
              backface-visibility:visible;
            }
            &:before, &:after{
              content:'';
              pointer-events:all;
              transform-style:preserve-3d;
              position:absolute;
            }
            &:after{
              width:105%;
              height:110%;
              left:-2.5%;
              top:-5%;
              transform:translateZ(-1vw);
              z-index:9;
              background:url('https://puu.sh/F2co3/701a762f29.png') 50% 50% / 100% 100%;
            }
            &:before{
              width:200%;
              height:100vh;
              background:url('data:image/png;base64,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') 50% 50% / 15px 15px, linear-gradient(to bottom, rgba(77,77,0,0.75), rgba(77,77,0,0.75)), url('https://puu.sh/F2aVy/2392491d18.jpg');
              box-shadow: inset 0 0 40vw 10vw rgba(0,0,0,0.75), inset 0 15.01vh 0 #fff, inset 0 -5vh 0 0 #fff;
              filter:brightness(0.75);
              top:50%;
              left:50%;
              transform:translateZ(1px) translate(-50%, -50%);
              z-index:-1;
              transform-style:preserve-3d;
              pointer-events:none;
            }
          }
        }
        @for $i from 1 through 10{
          &:nth-of-type(#{$i}){
            transform:rotate(#{(4 - $i) * 36}deg);
            transition:transform 1s ease-in-out;
            &:nth-of-type(odd){
              div{
                div{
                  top:5vh;
                  &:before{
                    box-shadow:inset 0 0 40vw 10vw rgba(0,0,0,0.75), inset 0 -15vh 0 0 #fff, inset 0 5vh 0 #fff;
                  }
                  &:after{
                    height:calc(110% + 5vh);
                    top:calc(-5% - 7.5vh);
                    background:url('https://puu.sh/F2g8b/b6b70ca540.png') 50% 50% / 100% 100%;
                  }
                }
              }
            }
            &:nth-of-type(3n){
              div{
                div{
                  &:after{
                    height:calc(110% + 2.5vh);
                    top:calc(-5% - 5vh);
                    filter:brightness(0.65);
                    width:100%;
                    left:0%;
                    background:url('https://puu.sh/F2geb/e4224d1fa1.png') 50% 50% / 100% 100%;
                  }
                }
              }
            }
            &:nth-of-type(even){
              div{
                div{
                  top:-5vh;
                  span{
                    top: calc(100% + 0.5vmin + 10vh);
                  }
                  &:after{
                    height:calc(110% + 5vh);
                    top:calc(-5% + 2.5vh);
                  }
                }
              }
            }
          }
        }
        img{
          width:70%;
          height:auto;
          display:block;
          margin:0px auto;
          z-index:2;
          position:relative;
          max-height:60vh;
          filter:sepia(0.5);
          pointer-events:all;
          backface-visibility:visible;
        }
      }
    }
  }
}
              
            
!

JS

              
                $(document).ready(function(){
    $('img').wrap('<div class="pic"><div class="panel">');
    $('.panel').append('<div></div>');
    leftClip = 0;
    topClip = 0;
    topPos = 0;
    leftPos = 0;
    rotate = 0;
    width = $('body').width();
    height = $('body').height();
    pics = $('body').find('.panel div');
    names = ["Bark Twain", "Chewbarka", "Doc McDoggins", "Droolius Caesar", "Franz Fur-dinand", "Fyodor Dogstoevsky & <br>Leo Chew-toy", "Hairy Paw-ter", "Sarah Jessica Barker", "Kareem Abdul Ja-Bark", "Rick & Gary"];
  
    for (let j = 0; j < 11; j++) {
       $(pics[j]).attr('data-num', (j + 1)).append('<span>' + names[j] + '</span>');
    }
  
    $('.panel div').hover(function() {
      $('body').toggleClass('active');
        var picNum = $(this).attr('data-num');
        if (picNum > 6){
          var num =  (rotate - (picNum * 30)) + 6;
        }else{
          var num =  (rotate - (picNum * 30)) + 18;
      } 
        
        
    $(".clip").get(0).style.setProperty( "--zoom", num + "deg");
    });
    $('.panel').mouseleave(function() {
        $('body').removeClass('zoom').removeClass('active'); 
      });
   $('body').click(function(){
           if ($('body').hasClass('active')){
             $(this).toggleClass('zoom');
           }
      });
  
$(document).on('mousemove', function(e){
  
   leftPos = e.pageX;
   topPos = e.pageY;
   leftRot =  leftPos/(width/100);
   leftClip =  (leftPos/(width/30) + 37.5);
   topRot =  topPos/(width/50);
   topShift =  ((height/2) - topPos) * -0.0125;
   topClip =  (topPos/(height/80) + 12.5);
   rotate = (leftRot * 3);
   rotate2 = ((leftRot/6) * 1.8) - 15;
   rotateY = ((topRot * -3.6)/5) - 80;

  $(".wrap").get(0).style.setProperty( "--bg", (leftRot * 6) + "px");
  $(".wrap").get(0).style.setProperty( "--rotateY", rotateY + "deg");
  $(".wrap").get(0).style.setProperty( "--rotateWrap", rotate + "deg");
  $(".clip").get(0).style.setProperty(
          "--clip", "radial-gradient(circle at bottom, transparent, transparent 5vw, rgba(255,255,255,0.5) 5.5vw, rgba(255,255,255,0.5)) calc(" + leftClip + "vw - 100vw) calc(" + (topClip - 100) + "vh + 0.015px) / 200% 100% no-repeat, radial-gradient(circle at " + leftClip + "% " + topClip + "%, transparent, transparent 5vw, rgba(255,255,255,0.5) 5.5vw, rgba(255,255,255,0.5)), linear-gradient(85deg, rgba(255,255,255,0.5) calc(100% - 5.5vw), transparent calc(100% - 5vw)) calc(" + (leftClip - 0) + "vw - 200vw) " + topClip + "vh / 200% 200% no-repeat, linear-gradient(-85deg, rgba(255,255,255,0.5) calc(100% - 5.5vw), transparent calc(100% - 5vw)) calc(" + (leftClip + 0) + "vw + 0vw) " + topClip + "vh / 200% 200% no-repeat");
  $(".clip").get(0).style.setProperty( "--rotate2", rotate2 + "deg");
  $(".clip").get(0).style.setProperty( "--x", rotate2 + "vw");
  $(".clip").get(0).style.setProperty( "--y", topShift + "vh");
});
setTimeout(function(){
  $('body').addClass('ready')
}, 2000);
});



              
            
!
999px

Console