diff --git a/src/components/atoms/AboutGridPhoto.svelte b/src/components/atoms/AboutGridPhoto.svelte
index 99d98d7..9c77757 100644
--- a/src/components/atoms/AboutGridPhoto.svelte
+++ b/src/components/atoms/AboutGridPhoto.svelte
@@ -10,6 +10,7 @@
 
     $: classes = [
         hovering ? 'is-hovered' : undefined,
+        disabled ? 'is-disabled' : undefined,
         $$props.class
     ].join(' ').trim()
 
@@ -29,7 +30,6 @@
     on:mouseleave={handleMouseLeave}
 >
     <Image
-        class={disabled ? 'is-disabled' : null}
         {id}
         sizeKey="photo-list"
         sizes={{
diff --git a/src/style/pages/_about.scss b/src/style/pages/_about.scss
index c1e73ec..9affdf3 100644
--- a/src/style/pages/_about.scss
+++ b/src/style/pages/_about.scss
@@ -517,13 +517,13 @@
         $opacity-off: 0.2;
 
         // States
-        :global(.is-disabled) {
+        :global(.is-disabled picture) {
             opacity: $opacity-off;
         }
         :global(.is-hovered picture) {
             opacity: 1;
         }
-        :global(.is-hovered picture:not(.is-disabled)) {
+        :global(.is-hovered:not(.is-disabled) picture) {
             opacity: $opacity-off;
         }