Add hover effect on card

nextjs/components/organisms/CompanyRow.js

@@ -22,7 +22,11 @@ const styles = theme => ({
     height: '67vh',
     width: '100%',
     cursor: 'pointer',
+    transform: 'translateY(-0px)',
+    transition: 'transform 0.25s',
     '&:hover': {
+      transform: 'translateY(-15px)',
+      transition: 'transform 0.5s',
       '& .cardHover': {
         backgroundColor: 'rgba(0,0,0,0)',
       },
@@ -145,34 +149,34 @@ class CompanyRowComponent extends React.Component {
 
     return (
       <Link href={`/Entreprise/${rowData.id}`} prefetch>
-          <Card className={classes.card}>
-            <CardContent className={classes.content}>
-              <CardMedia
-                className={classes.cover + ' cardHover'}
-                image={imgUrl}
-                title={rowData.title}
-              >
-                <KeyboardArrowleftIcon className={classes.iconPlay} />
-              </CardMedia>
-              <div className={classes.logoContainer}>
-                <Avatar className={classes.logo} src={logoUrl} />
-              </div>
+        <Card className={classes.card}>
+          <CardContent className={classes.content}>
+            <CardMedia
+              className={classes.cover + ' cardHover'}
+              image={imgUrl}
+              title={rowData.title}
+            >
+              <KeyboardArrowleftIcon className={classes.iconPlay} />
+            </CardMedia>
+            <div className={classes.logoContainer}>
+              <Avatar className={classes.logo} src={logoUrl} />
+            </div>
 
-              <div className={classes.detailsContainer}>
-                <Typography
-                  variant="headline"
-                  variant="h6"
-                  component="h3"
-                  className={classes.companyTitle}>
-                  {rowData.business_name}
-                </Typography>
-                <div className={classes.iconTextContainer}>
-                  <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={location} />
-                </div>
+            <div className={classes.detailsContainer}>
+              <Typography
+                variant="headline"
+                variant="h6"
+                component="h3"
+                className={classes.companyTitle}>
+                {rowData.business_name}
+              </Typography>
+              <div className={classes.iconTextContainer}>
+                <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={location} />
               </div>
-              <Chip color="primary" size="small" label={nbOffre} className={classes.chip} />
-            </CardContent>
-          </Card>
+            </div>
+            <Chip color="primary" size="small" label={nbOffre} className={classes.chip} />
+          </CardContent>
+        </Card>
       </Link>
     );
   }

nextjs/components/organisms/OffreRow.js

@@ -21,8 +21,13 @@ const styles = theme => ({
     width: '100%',
     cursor: 'pointer',
     boxShadow: '0px 2px 4px rgba(30, 35, 39, 0.15)',
+    transform: 'translateY(-0px)',
+    transition: 'transform 0.25s',
+      
     '&:hover': {
       boxShadow: '0px 6px 16px rgba(30, 35, 39, 0.15)',
+      transform: 'translateY(-5px)',
+      transition: 'transform 0.5s',
       '& .cardHover': {
           backgroundColor: 'rgba(0,0,0,0)',
       },

nextjs/components/organisms/Tile.js

@@ -17,7 +17,11 @@ const styles = theme => ({
     height: '66vh',
     width: '100%',
     cursor: 'pointer',
+    transform: 'translateY(-0px)',
+      transition: 'transform 0.25s',
     '&:hover': {
+      transform: 'translateY(-15px)',
+      transition: 'transform 0.5s',
       '& .cardHover': {
           backgroundColor: 'rgba(0,0,0,0)',
       },