Add cool blur effect

templates/personal/risdeveau/index.html

@@ -20,6 +20,9 @@
     .qr img {
       width: 100%;
     }
+    .qr p {
+      text-align: center;
+    }
 
     .blocks.qr {
       flex-wrap: nowrap;
@@ -29,7 +32,6 @@
       scroll-behavior: smooth;
       scroll-snap-type: x mandatory;
     }
-
     .blocks.qr::-webkit-scrollbar { display: none; }
 
     .block.qr {
@@ -38,19 +40,22 @@
       max-width: 13.666rem;
     }
 
-    .qr p {
-      text-align: center;
-    }
-
     .badges .block {
       flex: 1;
       text-wrap-mode: nowrap;
     }
-
     .badges .block:hover {
       flex: 1.5;
       transform: none;
     }
+
+    .blocks.qr:hover .block.qr:not(:hover) {
+      filter: blur(5px);
+      transition: all 0.3s ease;
+    }
+    .block.qr:hover {
+      filter: blur(0) !important;
+    }
   </style>
 </head>
 <body>