Cards hover effect added

src/components/Cryptos/Crypto.jsx

@@ -5,6 +5,7 @@ import { Box, Card, CardContent, CardMedia, Grid, Typography } from '@mui/materi
 import { Chart as ChartJS } from 'chart.js/auto'
 import { Chart, Line }            from 'react-chartjs-2' //WTF https://stackoverflow.com/questions/67727603/error-category-is-not-a-registered-scale
 import Cookies from 'js-cookie';
+import { borderRadius } from '@mui/system';
 
 const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLength, setLoading}) => {
 
@@ -20,6 +21,8 @@ const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLengt
     }
   }
 
+  const [backgroundColor, setBackgroundColor] = useState("#ffffff0")
+
   React.useEffect(() => {
 
     // console.log(cryptoPrices[data.id].prices)
@@ -51,6 +54,7 @@ const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLengt
                 height="10vh"
                 width="100%"
                 sx={{display: "flex", alignItems: "center"}}
+                paddingRight="10px"
               >
                   {data.name}
               </Typography>
@@ -110,7 +114,9 @@ const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLengt
                     },
                 }}
                 className="line"
-                style={{backgroundColor: "#ffffff0"}}
+                style={{backgroundColor: backgroundColor, boxSizing: "content-box", transition: "all 0.4s ease-in-out", borderRadius: "3px"}}
+                onMouseEnter={() => setBackgroundColor("#ffffff1a")}
+                onMouseLeave={() => setBackgroundColor("transparent")} // https://stackoverflow.com/questions/8739665/is-background-colornone-valid-css
             />
             <Typography
               variant="h6"

src/components/Cryptos/Cryptos.jsx

@@ -32,7 +32,11 @@ const Cryptos = ({setLoading}) => {
 
         .card {
 
-            background: rgba( 78, 159, 255, 0) !important;
+            background: rgba( 78, 159, 255, 0);
+            backdrop-filter: blur( 14px );
+                -webkit-backdrop-filter: blur( 14px );
+
+            
         }
 
         .container {
@@ -44,6 +48,11 @@ const Cryptos = ({setLoading}) => {
             /* height: 80vh; */
             user-select: none;
             cursor: pointer;
+            transition: 0.25s ease-in-out;
+
+            :hover {
+                background: #00f7ff5e;
+            }
 
             .line {
 
@@ -189,10 +198,7 @@ const Cryptos = ({setLoading}) => {
             //Almacenate actual day on LocalStorage
             const actualDay = moment().format('DD-MM-YYYY')
             localStorage.setItem('lastDayPrices', actualDay)
-        }
+        }    
-
-
-    
     }, [cryptosPrices])
 
     return (