diff --git a/demo/src/App.vue b/demo/src/App.vue
index 07196fd..4d3e92e 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -2,6 +2,7 @@
 <div id="app">
   <demo-error-modal/>
   <demo-login-modal/>
+  <demo-dog-profile-modal />
   <demo-conditional-modal/>
   <demo-focus-modal/>
 
@@ -42,6 +43,10 @@
     <button @click="show(false, true, false)">Adaptive</button>
     <button @click="show(false, false, true)">Draggable</button>
     <br>
+    <button class="green"
+            @click="$modal.show('dog-profile')">
+      Demo: Dog Profile photo
+    </button>
     <button class="green"
             @click="$modal.show('error-modal')">
       Demo: Error handling
@@ -50,10 +55,12 @@
             @click="$modal.show('demo-login')">
       Demo: Login
     </button>
+    <!--
     <button class="green"
             @click="$modal.show('input-focus-modal')">
       Demo: Focus Input
     </button>
+    -->
     <button :class="canBeShown ? 'green' : 'red'"
             @click="conditionalShow">
       Can <b v-if="!canBeShown">NOT</b> be shown
@@ -70,6 +77,7 @@ import PropsTable           from './components/PropsTable.vue'
 import DemoErrorModal       from './components/DemoErrorModal.vue'
 import DemoFocusModal       from './components/InputFocusModal.vue'
 import DemoLoginModal       from './components/DemoLoginModal.vue'
+import DemoDogProfileModal  from './components/DogProfileModal.vue'
 import DemoConditionalModal from './components/ConditionalModal.vue'
 
 export default {
@@ -80,6 +88,7 @@ export default {
     DemoErrorModal,
     DemoFocusModal,
     DemoLoginModal,
+    DemoDogProfileModal,
     DemoConditionalModal
   },
   data() {
diff --git a/demo/src/components/DogProfileModal.vue b/demo/src/components/DogProfileModal.vue
new file mode 100644
index 0000000..6a8371b
--- /dev/null
+++ b/demo/src/components/DogProfileModal.vue
@@ -0,0 +1,43 @@
+<template>
+  <modal name="dog-profile"
+         classes="cute-dog-profile-photo"
+         transition="scale"
+         :height="260"
+         :width="260"
+         @opened="opened">
+    <img src="/static/cute_dog.gif" />
+  </modal>
+</template>
+<script>
+export default {
+  name: 'InputFocusModal',
+  methods: {
+    opened (event) {
+    }
+  }
+}
+</script>
+<style lang="scss">
+  .cute-dog-profile-photo {
+    background-color: transparent;
+    border-radius: 100%;
+    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.65);
+
+    img {
+      width: 260px;
+      height: 260px;
+    }
+  }
+
+  .scale-enter-active,
+  .scale-leave-active {
+    transition: all 0.5s;
+  }
+
+  .scale-enter,
+  .scale-leave-active {
+    opacity: 0;
+    transform: scale(0.3) translateY(24px);
+  }
+</style>
diff --git a/demo/static/cute_dog.gif b/demo/static/cute_dog.gif
new file mode 100644
index 0000000..191c663
Binary files /dev/null and b/demo/static/cute_dog.gif differ