diff --git a/src/lib/lists/gallery-row.svelte b/src/lib/lists/gallery-row.svelte index 52992aa..50061ab 100644 --- a/src/lib/lists/gallery-row.svelte +++ b/src/lib/lists/gallery-row.svelte @@ -42,13 +42,16 @@ margin: 0; padding: 8px; text-decoration: none; - transition: background-color 0.1s ease-out, border-color 0.1s ease-out; + transition: background-color 0.1s ease-out, + border-color 0.1s ease-out, + backdrop-filter 0.2s ease-out; border: 2px dashed transparent; } .row-entry:hover { background-color: var(--color-background-highlight); border-color: var(--color-highlight); + backdrop-filter: blur(var(--blur-radius-background)); } .row-entry:hover .row-img { diff --git a/src/lib/lists/gallery.svelte b/src/lib/lists/gallery.svelte index 5e4e1e1..c7307d6 100644 --- a/src/lib/lists/gallery.svelte +++ b/src/lib/lists/gallery.svelte @@ -90,7 +90,10 @@ border-color: transparent; border-width: 2px; border-left: none; - transition: border-color 0.1s ease-out, padding-right 0.1s ease-out, background-color 0.1s ease-out; + transition: border-color 0.1s ease-out, + padding-right 0.1s ease-out, + background-color 0.1s ease-out, + backdrop-filter 0.2s ease-out; } .gallery-title, .gallery-subtitle { @@ -111,6 +114,7 @@ .gallery-container:hover .gallery-text-container { border-color: var(--color-highlight); background-color: var(--color-background-highlight); + backdrop-filter: blur(var(--blur-radius-background)); } .gallery-container:hover .gallery-img, .gallery-container:hover .gallery-img-placeholder { /* filter: grayscale(0%); */