<template>
  <div id="app">
    <div class="scanner" @click="state = !state">
      <transition name="scan">
        <div class="hands" key="hands" v-if="state"></div>
        <div class="meditation" key="meditation" v-else></div>
      </transition>
    </div>
    
    <p>Click image to transition</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      state: true
    }
  }
}
</script>

<style>
  html, body, #app{
    height: 100%;
    width: 100%;
  }
  
  body{
    background: black;
    color: gray;
  }
  
  #app{
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .scanner{
    cursor: pointer;
    filter: blur(2px);
    height: 650px;
    max-height: 75vh;
    max-width: 75vh;
    position: relative;
    width: 650px;
  }

  .scanner div{
    background-size: cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  
  .scanner div::before{
    backdrop-filter: blur(1px) brightness(1000%) grayscale(100%);
    -webkit-backdrop-filter: blur(1px) brightness(1000%) grayscale(100%);
    content: "";
    display: block;
    height: 10%;
    position: absolute;
    transform: translateY(-50%);
    width: 100%;
  }
  
  .scanner .hands{
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/141041/betweenthesheets.jpg);
  }
  
  .scanner .meditation{
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/141041/meditation.jpg);
  }
  
  .scan-enter{
    clip-path: inset(0 0 100% 0);
  }
  
  .scan-enter::before{
    top: 0%;
  }
  
  .scan-enter-active, .scan-leave-active{
    transition: clip-path 2s linear;
  }
  
  .scan-enter-active::before, .scan-leave-active::before{
    transition: top 2s linear;
  }
  
  .scan-enter-to{
    clip-path: inset(0 0 0 0);
  }
  
  .scan-enter-to::before{
    top: 100%;
  }
  
  .scan-leave{
    clip-path: inset(0 0 0 0);
  }
  
  .scan-leave::before{
    top: 0%;
  }
  
  .scan-leave-to{
    clip-path: inset(100% 0 0 0);
  }
  
  .scan-leave-to::before{
    top: 100%;
  }
  
  @media only screen and (max-width: 600px) {
    .scanner {
      height: 100vw;
      width: 100vw;
    }
  }
</style>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.