fix: home background hover

cardano-foundation · Sep 25, 2024 · 950835a · 950835a
1 parent b8ec638
commit 950835a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 3 deletions.
diff --git a/ui/summit-2024/src/components/Layout/Layout.tsx b/ui/summit-2024/src/components/Layout/Layout.tsx
@@ -153,7 +153,7 @@ const Layout: React.FC<LayoutProps> = ({
                   overflowY: "auto",
                   maxHeight: "calc(100vh - 102px)",
                   borderRight: "1px solid #737380",
-                  paddingRight: "8px"
+                  paddingRight: "8px",
                 }}
               >
                 {title ? (

diff --git a/ui/summit-2024/src/pages/Home/components/ExploreSection.tsx b/ui/summit-2024/src/pages/Home/components/ExploreSection.tsx
@@ -196,16 +196,25 @@ const ExploreSection = () => {
             backgroundSize: "180% 160%",
             backgroundPosition: "center",
             cursor: "pointer",
+            "&:hover": {
+              "& > .backdrop": {
+                backdropFilter: "blur(6px)",
+                background: "rgba(18, 18, 18, 0.25)",
+              },
+            },
           }}
         >
           <CardContent
+            className="backdrop"
             sx={{
               position: "relative",
               zIndex: 2,
               display: "flex",
               flexDirection: "column",
               justifyContent: "space-between",
               height: "100%",
+              background: "rgba(18, 18, 18, 0.20)",
+              backdropFilter: "blur(4px)",
             }}
           >
             <Box
@@ -290,9 +299,27 @@ const ExploreSection = () => {
             backgroundSize: "180% 160%",
             backgroundPosition: "center",
             cursor: "pointer",
+            "&:hover": {
+              "& > .backdrop": {
+                backdropFilter: "blur(4px)",
+                background: "rgba(18, 18, 18, 0.25)",
+              },
+            },
           }}
         >
-          <CardContent sx={{ position: "relative", zIndex: 2 }}>
+          <CardContent
+            className="backdrop"
+            sx={{
+              position: "relative",
+              zIndex: 2,
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
+              height: "100%",
+              background: "rgba(18, 18, 18, 0.20)",
+              backdropFilter: "blur(2px)",
+            }}
+          >
             <Box
               component="div"
               sx={{

diff --git a/ui/summit-2024/src/pages/Home/components/TicketsSection.tsx b/ui/summit-2024/src/pages/Home/components/TicketsSection.tsx
@@ -59,9 +59,16 @@ const TicketsSection = () => {
                   sm: "60px",
                 },
                 cursor: "pointer",
+                "&:hover": {
+                  "& > .backdrop": {
+                    backdropFilter: "blur(6px)",
+                    background: "rgba(18, 18, 18, 0.55)",
+                  },
+                },
               }}
             >
               <Box
+                className="backdrop"
                 component="div"
                 sx={{
                   position: "absolute",
@@ -70,7 +77,7 @@ const TicketsSection = () => {
                   width: "100%",
                   height: "100%",
                   background: "rgba(18, 18, 18, 0.50)",
-                  backdropFilter: "blur(3px)",
+                  backdropFilter: "blur(4px)",
                   zIndex: 0,
                 }}
               />