Add hover effect to card interest

Zoid-AI · Nov 20, 2022 · 6978552 · 6978552
1 parent 9433267
commit 6978552
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/src/components/Interest.tsx b/src/components/Interest.tsx
@@ -28,9 +28,16 @@ export const Interest: React.FC<{ name: string }> = ({ name }) => {
             <AccordionSummary expandIcon={<ExpandMore />}>
                 <Typography>{name}</Typography>
             </AccordionSummary>
-            <AccordionDetails sx={{ display: "flex",flexWrap:"wrap",gap: 5, justifyContent:"center" }}>
+            <AccordionDetails sx={{ display: "flex", flexWrap: "wrap", gap: 5, justifyContent: "center" }}>
                 {articles.map((article, index) => (
-                    <Card sx={{ width: "30%" }} key={index}>
+                    <Card sx={{
+                        width: "30%",
+                        ':hover': {
+                            boxShadow: 10, // theme.shadows[20]
+                            transform: "scale(1.02) perspective(0px)",
+                            transition: "transform .5s, box-shadow 1s"
+                        },
+                    }} key={index}>
                         <CardMedia
                             component="img"
                             height="140"