[F] Fix animation

src/views/Photo.vue

@@ -63,14 +63,13 @@ export default class Photos extends Vue {
   async clickPhoto(p: PhotoMetadata, e: MouseEvent) {
     console.log("Clicked photo:", p.id)
     const dom = e.currentTarget as HTMLDivElement
-    const photoEl = dom.querySelector('.photo-abs-container') as HTMLDivElement
+    const photoEl = dom.querySelector('.photo-wrapper') as HTMLDivElement
 
     photoEl.style.viewTransitionName = `photo-${p.id}`
 
     const transition = document.startViewTransition(() => {
-      // Toggle .active on dom
       dom.classList.toggle('active')
-
+      document.getElementsByClassName('blur')[0].toggleAttribute('hidden')
     })
 
     await transition.finished
@@ -89,22 +88,27 @@ export default class Photos extends Vue {
       <div v-for="p in row" :key="p.id" @click.capture="async e => await clickPhoto(p, e)"
            class="img-container" cursor-pointer>
         <img class="photo" w-full h-full object-contain opacity-0 :src="url(p.thumbnail_edited)" :alt="p.id"/>
-        <div class="photo-abs-container" absolute inset-0 flex justify-center align-center :style="{transform: randomRotation(p.id)}">
-          <img class="photo" w-full h-full object-contain :src="url(p.thumbnail_edited)" :alt="p.id" />
+        <div class="photo-abs-container" absolute inset-0 flex justify-center items-center>
+          <div class="photo-wrapper" :style="{transform: randomRotation(p.id)}">
+            <img class="photo" w-full object-contain :src="url(p.thumbnail_edited)" :alt="p.id" />
+          </div>
         </div>
-        <div class="blur"></div>
         <div flex w-full justify-center absolute position-top-none>
           <img class="pin" src="/thumb%20tack%202%20plain.png"  alt=""/>
         </div>
       </div>
     </div>
   </div>
+  <div class="blur" hidden pos-fixed inset-0 backdrop-blur-sm z-5></div>
 </template>
 
 <style scoped lang="sass">
 @use "../css/colors"
 @use "../css/responsive"
 
+.blur
+  z-index: 2500
+
 .title
   margin-top: 8rem
   margin-bottom: 6rem
@@ -112,47 +116,37 @@ export default class Photos extends Vue {
 .bold
   font-size: 3em
 
-.outer-grid
-  gap: 0
-
 .img-container
   margin: -0.5rem
   max-width: 50%
   position: relative
 
-  .blur
-    display: none
-
 .img-container.active
   position: unset
 
-  .blur
-    position: fixed
-    inset: 0
-    backdrop-filter: blur(5px)
-    z-index: 2000
-    display: block
   img.pin
     display: none
   .photo-abs-container
     position: fixed
     z-index: 3000
-    //transform: scale(1.5)
+
+  .photo-wrapper
     transform: rotate(0deg) !important
 
   img.photo
     z-index: 3001
 
 img.photo
-  //clip-path: inset(4.3% 1.8%)
+  clip-path: inset(2.8% 1.8% 2.4%)
   pointer-events: none
 
 div.photo-abs-container
   position: absolute
   inset: 0
   z-index: 1000
-  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3))
 
+div.photo-wrapper
+  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3))
 
 img.pin
   width: 40px