diff --git a/pkg/web_css/lib/src/_base.scss b/pkg/web_css/lib/src/_base.scss
index 4a790ff2c1..d2de563489 100644
--- a/pkg/web_css/lib/src/_base.scss
+++ b/pkg/web_css/lib/src/_base.scss
@@ -125,17 +125,7 @@ a {
     text-decoration: underline;
   }
 
-  .light-theme & {
-    &:hover {
-      filter: brightness(80%);
-    }
-  }
-
-  .dark-theme & {
-    &:hover {
-      filter: brightness(120%);
-    }
-  }
+  @include variables.brightness-on-hover;
 }
 
 main {
diff --git a/pkg/web_css/lib/src/_list.scss b/pkg/web_css/lib/src/_list.scss
index 9584f43d8b..2d15aee28f 100644
--- a/pkg/web_css/lib/src/_list.scss
+++ b/pkg/web_css/lib/src/_list.scss
@@ -228,14 +228,8 @@
     min-width: 102px;
     margin-top: 10px;
     cursor: pointer;
-  }
-
-  .packages-screenshot-thumbnail {
-    transition: 200ms filter;
-  }
 
-  .packages-screenshot-thumbnail:hover {
-    filter: brightness(50%);
+    @include variables.brightness-on-hover;
   }
 
   .packages-title {
diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss
index d1fb1fa5ca..1faf5d0227 100644
--- a/pkg/web_css/lib/src/_variables.scss
+++ b/pkg/web_css/lib/src/_variables.scss
@@ -281,6 +281,22 @@
   }
 }
 
+@mixin brightness-on-hover {
+  transition: 0.3s filter;
+
+  .light-theme & {
+    &:hover {
+      filter: brightness(80%);
+    }
+  }
+
+  .dark-theme & {
+    &:hover {
+      filter: brightness(120%);
+    }
+  }
+}
+
 $device-desktop-min-width: 641px;
 $device-mobile-max-width: 640px;
 $device-tablet-max-width: 979px;