house card hover fix

src/components/HouseCard.js

@@ -65,11 +65,8 @@ const Card = styled.div`
   cursor: pointer;
   transition: 0.4s;
   position: relative;
-  background-image: url("skyscraper.png");
-  object-fit: cover;
-
-
-
+  background-image: url("${props => props.img ? props.img : "vrl.jpg"}");
+  background-size: cover;
 
   &:hover ${Overlay} {
     background-color: rgba(0,0,0,0.5);
@@ -88,13 +85,11 @@ const Card = styled.div`
 const HouseCard = (props) => {
 
     return (
-
-
-        <Card>
+        <Card img = {props.img}>
             <Overlay>
                 <Hover>
-                    <CardTitle>asdf</CardTitle>
-                    <Paragraph>zxcv</Paragraph>
+                    <CardTitle>{props.title ? props.title : "asdf"}</CardTitle>
+                    <Paragraph>{props.desc ? props.desc: "zxcv"}</Paragraph>
                 </Hover>
             </Overlay>
         </Card>

src/components/Options.js

@@ -11,6 +11,8 @@ const CardList = styled.div`
   grid-template-rows: repeat(auto-fill,minmax(200px,1fr));
   grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
   grid-gap: 30px;
+  align-items: center;
+  justify-items: center;
 
 
 
@@ -91,12 +93,12 @@ export default function Options() {
                 <button id="finishBtn" >Finish</button>
             </div>
             <CardList>
+            <Card img="skyscraper.png" title="cardtitle" desc="description"/>
             <Card img="skyscraper.png"/>
             <Card img="skyscraper.png"/>
             <Card img="skyscraper.png"/>
-            <Card img="skyscraper.png"/>
-            <Card img="skyscraper.png"/>
-            <Card img="skyscraper.png"/>
+            <Card img="indigo.jpg"/>
+            <Card img="locaft.png"/>
             <Card img="skyscraper.png"/>
             <Card img="skyscraper.png"/>
             <Card img="skyscraper.png"/>

src/components/Sidebar.js

@@ -13,7 +13,6 @@ const StyledMenu = styled.nav`
   height: 100vh;
   text-align: left;
   padding: 2rem;
-  position: absolute;
   top: 0;
   left: 0;
   transition: transform 0.3s ease-in-out;
@@ -43,11 +42,11 @@ const StyledMenu = styled.nav`
   }
 `
 
-const Menu = (props) => {
+const Menu = ({open, setOpen}) => {
   const { userData, setUserData } = useContext(UserContext);
   return (
-    <StyledMenu open={props.open}>
-      <a href="/#about-us">
+    <StyledMenu open={open} >
+      <a href="/#about-us"onClick={() => setOpen(false)}>
         <span role="img" aria-label="about us">💁🏻‍♂️</span>
         About us
       </a>
@@ -55,18 +54,18 @@ const Menu = (props) => {
         <span role="img" aria-label="pricing">💸</span>
         Pricing
         </a>
-      <a href="/#footer">
+      <a href="/#footer"onClick={() => setOpen(false)}>
         <span role="img" aria-label="contact us">📩</span>
         Contact
         </a>
-        
+
       {userData.user ? (
       <Link >
         <span role="img" aria-label="{userData.user.username}">📩</span>
         {userData.user.username}
         </Link>
-            
-        
+
+
           ):(
 <React.Fragment>
       <a href="/user/register">
@@ -79,7 +78,7 @@ const Menu = (props) => {
         </a>
 </React.Fragment>
         )
-      
+
       }
     </StyledMenu>
   )
@@ -151,13 +150,13 @@ const Sidebar = (props) => {
   const node = React.useRef();
   return (
     <div>
-    
+
       <div ref={node}>
         <Burger open={open} setOpen={setOpen} />
         <Menu open={open} setOpen={setOpen} logout={props.logout} />
       </div>
     </div>
-  )  
+  )
 }
 
 const useOnClickOutside = (ref, handler) => {