From 83c7503d754123e4eae0d95f56703383d4f40798 Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Thu, 14 Jan 2021 21:55:14 +0000
Subject: [PATCH] feat(slick): hide button when not hovered

---
 src/components/custom-slick.js | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/custom-slick.js b/src/components/custom-slick.js
index f8c31a3..043bbc5 100644
--- a/src/components/custom-slick.js
+++ b/src/components/custom-slick.js
@@ -19,15 +19,11 @@ const Button = styled.button`
   border: none;
   margin: 0;
   padding: 0;
-  opacity: 0.5;
+  opacity: 0;
   transform: translateY(-50%);
   transition: opacity 0.3s ease-in-out;
   cursor: pointer;
 
-  &:hover {
-    opacity: 1;
-  }
-
   svg {
     width: 32px;
     height: 32px;
@@ -44,6 +40,17 @@ const StyledButton = ({ to, onClick }) => (
     {to === "prev" ? <LeftArrow /> : <RightArrow />}
   </Button>
 );
+
+const Container = styled.div`
+  &:hover button {
+    opacity: 0.5;
+  }
+
+  button:hover {
+    opacity: 1;
+  }
+`;
+
 export default function CustomSlick({ children }) {
   const slick = useRef();
   const settings = {
@@ -59,8 +66,10 @@ export default function CustomSlick({ children }) {
     slick.current.slickPlay();
   }, [slick]);
   return (
-    <Slick ref={slick} {...settings}>
-      {children}
-    </Slick>
+    <Container>
+      <Slick ref={slick} {...settings}>
+        {children}
+      </Slick>
+    </Container>
   );
 }