Styling Menu Items

navin-moorthy · Aug 9, 2019 · e99fdec · e99fdec
1 parent 711f42d
commit e99fdec
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 7 deletions.
diff --git a/public/index.html b/public/index.html
@@ -10,6 +10,10 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap"
+      rel="stylesheet"
+    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,3 @@
+body {
+  font-family: "Open Sans Condensed", sans-serif;
+}
diff --git a/src/components/menu-item/menu-item.component.jsx b/src/components/menu-item/menu-item.component.jsx
@@ -2,12 +2,13 @@ import React from "react";
 import "./menu-item.styles.scss";
 
 const MenuItem = ({ title, imageUrl, size }) => (
-  <div
+  <div className={`${size} menu-item`}>
-    style={{ backgroundImage: `url(${imageUrl})` }}
+    <div
-    className={`${size} menu-item`}
+      style={{ backgroundImage: `url(${imageUrl})` }}
-  >
+      className="background-image"
+    />
     <div className="content">
-      <h1 className="title">{title}</h1>
+      <h1 className="title">{title.toUpperCase()}</h1>
       <span className="subtitle">SHOP NOW</span>
     </div>
   </div>

diff --git a/src/components/menu-item/menu-item.styles.scss b/src/components/menu-item/menu-item.styles.scss
@@ -7,13 +7,32 @@
   justify-content: center;
   border: 1px solid black;
   margin: 0 7.5px 15px;
-  background-position: center;
+  overflow: hidden;
-  background-size: cover;
+
+  &:hover {
+    cursor: pointer;
+
+    & .background-image {
+      transform: scale(1.1);
+      transition: transform 3s cubic-bezier(0.25, 0.45, 0.45, 0.95);
+    }
+
+    & .content {
+      opacity: 0.9;
+    }
+  }
 
   &.large {
     height: 380px;
   }
 
+  .background-image {
+    width: 100%;
+    height: 100%;
+    background-position: center;
+    background-size: cover;
+  }
+
   &:first-child {
     margin-right: 7.5px;
   }
@@ -30,6 +49,9 @@
     align-items: center;
     justify-content: center;
     border: 1px solid black;
+    background-color: white;
+    opacity: 0.7;
+    position: absolute;
 
     .title {
       font-weight: bold;