Add cards hover

assets/img/arrow-peach.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L0 8L6 4L0 0Z" fill="#D1A69D"/>
+</svg>

assets/img/arrow-white.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L0 8L6 4L0 0Z" fill="white"/>
+</svg>

index.html

@@ -54,6 +54,7 @@ layout: default
       <div
         class="
           work__card
+          group
           flex flex-col
           items-center
           border
@@ -62,6 +63,9 @@ layout: default
           lg:p-8 lg:pb-10
           mb-8
           sm:mr-5 sm:mb-0
+          hover:bg-black
+          transition
+          duration-500
         "
       >
         <svg
@@ -70,56 +74,64 @@ layout: default
           viewBox="0 0 129 128"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
-          class="mb-2 lg:mb-8 w-16 h-16 lg:w-32 lg:h-32"
+          class="
+            mb-2
+            lg:mb-8
+            w-16
+            h-16
+            lg:w-32 lg:h-32
+            fill-current
+            group-hover:text-white
+          "
         >
           <g clip-path="url(#clip0)">
             <path
               d="M8.30241 92.0189C7.36013 92.0189 6.41784 91.5307 5.89016 90.6668C5.09864 89.3147 5.51325 87.587 6.87014 86.7983C7.05859 86.6856 23.4544 76.8077 36.4956 64.1128C22.9267 50.8922 7.13398 41.3898 6.94552 41.2772C5.58863 40.4884 5.17402 38.7607 5.96554 37.4086C6.75706 36.0565 8.49087 35.6434 9.84776 36.4321C10.5639 36.8828 28.015 47.3241 42.5262 62.1222C43.5816 63.2114 43.5816 64.9767 42.5262 66.0659C28.6935 80.2255 10.5639 91.1551 9.77238 91.6434C9.32008 91.8687 8.83009 92.0189 8.30241 92.0189Z"
-              fill="#151512"
+              class="text-black group-hover:text-white"
             />
             <path
               d="M120.774 92.0189C120.284 92.0189 119.794 91.9062 119.304 91.6057C118.55 91.155 100.383 80.2254 86.5498 66.0282C85.4945 64.939 85.4945 63.1738 86.5498 62.0846C101.023 47.2865 118.474 36.8451 119.228 36.3944C120.585 35.6057 122.319 36.0189 123.11 37.371C123.902 38.7231 123.487 40.4508 122.131 41.2395C121.98 41.3522 106.149 50.817 92.5804 64.0752C105.622 76.77 122.055 86.6855 122.206 86.7606C123.525 87.5494 123.977 89.2771 123.186 90.6292C122.658 91.5306 121.716 92.0189 120.774 92.0189Z"
-              fill="#151512"
+              class="text-black group-hover:text-white"
             />
             <path
               d="M64.462 42.8919C63.7459 42.8919 63.0298 42.629 62.5021 42.1032C48.2924 28.3192 37.3242 10.2534 36.8342 9.4647C36.0427 8.11258 36.495 6.38488 37.8142 5.59615C39.1334 4.80742 40.8672 5.22056 41.6964 6.57268C41.8095 6.76047 51.7223 23.0985 64.462 36.0938C77.7294 22.5727 87.2653 6.83559 87.3784 6.64779C88.1699 5.29568 89.9037 4.88254 91.2606 5.67127C92.5798 6.46 93.0321 8.1877 92.2406 9.53981C91.7883 10.291 81.3101 27.6431 66.4597 42.1032C65.8943 42.5915 65.1782 42.8919 64.462 42.8919Z"
-              fill="#151512"
+              class="text-black group-hover:text-white"
             />
             <path
               d="M39.2842 122.854C38.7942 122.854 38.3042 122.742 37.8142 122.441C36.495 121.652 36.0427 119.925 36.8342 118.573C37.2865 117.821 48.2924 99.7181 62.5021 85.934C63.5951 84.8824 65.3666 84.8824 66.4597 85.934C81.3101 100.357 91.7883 117.746 92.2406 118.497C93.0321 119.849 92.6175 121.577 91.2606 122.366C89.9414 123.155 88.1699 122.742 87.3784 121.389C87.2653 121.239 77.7671 105.465 64.462 91.9434C51.7223 104.939 41.7718 121.314 41.6964 121.465C41.1688 122.366 40.2265 122.854 39.2842 122.854Z"
-              fill="#151512"
+              class="text-black group-hover:text-white"
             />
             <path
               d="M125.56 59.5304C123.751 59.5304 103.925 59.4177 84.401 54.3473C82.931 53.9717 82.0264 52.4694 82.3656 50.967C86.8509 31.737 96.7261 12.9952 97.1784 12.244C97.8945 10.8544 99.6283 10.3661 100.985 11.0797C102.38 11.7933 102.907 13.521 102.154 14.8731C102.078 15.0609 93.1454 31.9623 88.547 49.5774C106.978 53.9342 125.296 53.8966 125.673 53.9342C127.218 53.9342 128.5 55.1736 128.5 56.7511C128.5 58.3285 127.256 59.568 125.673 59.568C125.635 59.5304 125.598 59.5304 125.56 59.5304Z"
-              fill="#151512"
+              class="text-black group-hover:text-white"
             />
             <path
               d="M29.4847 117.296C29.0324 117.296 28.5801 117.183 28.1655 116.958C26.7709 116.244 26.2809 114.516 26.9971 113.164C27.0724 113.014 35.7038 96.7134 40.4906 78.4223C22.8133 74.2908 3.70377 74.2157 3.36455 74.2157C1.78151 74.2157 0.5 72.9387 0.5 71.3988C0.5 69.8589 1.74382 68.5819 3.32686 68.5819C4.26914 68.4693 25.4517 68.5819 44.6366 73.6148C46.1066 73.9904 47.0112 75.4927 46.672 76.9951C41.9229 97.1265 32.4246 115.042 32.01 115.793C31.4823 116.732 30.5024 117.296 29.4847 117.296Z"
-              fill="#151512"
+              class="text-black group-hover:text-white"
             />
             <path
               d="M76.5614 46.0848C75.3176 46.0848 74.1868 45.2585 73.8476 44.019C68.4954 25.0143 68.1185 3.8688 68.1185 2.96739C68.0808 1.42748 69.3246 0.150489 70.9077 0.11293H70.9454C72.4907 0.11293 73.7345 1.35237 73.7722 2.89227C73.7722 3.08007 74.1114 22.1974 78.5967 39.8125C96.877 34.7796 113.084 25.9157 113.235 25.8031C114.592 25.0519 116.326 25.5402 117.08 26.8923C117.833 28.2444 117.343 29.9721 115.987 30.7233C115.233 31.1364 97.4047 40.9017 77.2775 45.9721C77.0137 46.0472 76.7875 46.0848 76.5614 46.0848Z"
-              fill="#151512"
+              class="text-black group-hover:text-white"
             />
             <path
               d="M58.2052 127.85C56.6598 127.85 55.416 126.611 55.3783 125.071C55.3783 124.883 55.0768 106.479 50.4031 88.1504C32.8012 93.033 15.9908 102.197 15.8401 102.272C14.4832 103.024 12.7494 102.535 11.9955 101.183C11.2417 99.8312 11.7317 98.1035 13.0886 97.3523C13.8801 96.9392 32.4997 86.7608 51.7223 81.9908C53.2299 81.6152 54.7376 82.5166 55.1145 83.9814C60.6551 103.888 60.9943 124.169 60.9943 125.033C61.032 126.535 59.7882 127.812 58.2052 127.85Z"
-              fill="#151512"
+              class="text-black group-hover:text-white"
             />
             <path
               d="M52.8914 45.8215C52.6275 45.8215 52.4014 45.784 52.1376 45.7089C33.028 40.4506 14.6346 29.8966 13.8808 29.4459C12.5239 28.6572 12.0716 26.9295 12.8631 25.5774C13.6169 24.2628 15.3507 23.7746 16.7076 24.5633C16.8961 24.676 33.4803 34.2159 50.9314 39.5117C56.0198 21.2957 56.7359 2.92951 56.7736 2.70416C56.849 1.16425 58.2059 -0.112743 59.7135 -6.72434e-05C61.2589 0.0374914 62.5027 1.35205 62.4273 2.92951C62.3896 3.7558 61.5981 24.0375 55.5675 43.8309C55.2283 45.0328 54.0975 45.8215 52.8914 45.8215Z"
-              fill="#151512"
+              class="text-black group-hover:text-white"
             />
             <path
               d="M69.4756 128C69.4379 128 69.4002 128 69.3625 128C67.8172 127.925 66.5734 126.648 66.6488 125.071C66.6865 124.169 67.5534 103.061 73.3578 84.1692C73.8101 82.7044 75.3555 81.8781 76.8254 82.2913C96.8019 87.8124 114.404 97.9908 115.158 98.4415C116.514 99.2302 116.967 100.958 116.175 102.31C115.384 103.662 113.65 104.113 112.293 103.324C112.142 103.211 96.1611 94.0096 77.9939 88.526C73.1317 106.028 72.3402 125.146 72.3025 125.334C72.2648 126.798 70.9833 128 69.4756 128Z"
-              fill="#151512"
+              class="text-black group-hover:text-white"
             />
             <path
               d="M3.43993 59.2676C3.36455 59.2676 3.32685 59.2676 3.28916 59.2676C1.74382 59.2676 0.5 57.9906 0.5 56.4507C0.5 54.9108 1.74382 53.7089 3.32685 53.6338C3.36455 53.6338 22.7002 53.6338 40.4906 49.5399C35.7791 31.2113 27.1855 14.9108 27.1101 14.7606C26.3563 13.3709 26.884 11.6807 28.2786 10.9296C29.6731 10.216 31.3693 10.7418 32.0854 12.0939C32.5 12.8451 41.9605 30.7981 46.6343 50.9296C46.9735 52.4319 46.0689 53.8967 44.5989 54.3098C26.0171 59.1549 5.47526 59.2676 3.43993 59.2676Z"
-              fill="#151512"
+              class="text-black group-hover:text-white"
             />
             <path
               d="M99.4777 117.371C98.4601 117.371 97.4801 116.807 96.9901 115.868C96.5755 115.08 86.738 96.3378 82.2904 77.1077C81.9512 75.6054 82.8558 74.1406 84.3258 73.765C104.415 68.6195 124.806 68.6946 125.598 68.657C127.143 68.657 128.425 69.934 128.425 71.4739C128.425 73.0138 127.143 74.2908 125.598 74.2908C125.598 74.2908 125.598 74.2908 125.522 74.2908C124.316 74.2908 106.375 74.3659 88.4341 78.535C92.9948 96.1124 101.89 113.089 101.965 113.239C102.681 114.629 102.154 116.319 100.797 117.033C100.382 117.258 99.93 117.371 99.4777 117.371Z"
-              fill="#151512"
+              class="text-black group-hover:text-white"
             />
           </g>
           <defs>
@@ -141,6 +153,7 @@ layout: default
             font-bold
             text-l
             lg:text-xxl
+            group-hover:text-white
           "
         >
           Waku
@@ -155,13 +168,17 @@ layout: default
             opacity-75
             text-left
             max-w-screen-xxs
+            group-hover:text-white
           "
         >
           A gossip based messaging protocol for private, secure, p2p messaging
           with implementations written in go, nim, java script.
         </p>
         <div class="work__link container flex justify-start">
-          <a class="link link--external" href="https://vac.dev/" target="_blank"
+          <a
+            class="link link--external group-hover:text-white"
+            href="https://vac.dev/"
+            target="_blank"
             >Visit Vaku</a
           >
         </div>
@@ -169,12 +186,16 @@ layout: default
       <div
         class="
           work__card
+          group
           flex flex-col
           items-center
           border
           pt-5
           p-4
           lg:p-8 lg:pb-10
+          hover:bg-black
+          transition
+          duration-500
         "
       >
         <svg
@@ -183,25 +204,38 @@ layout: default
           viewBox="0 0 122 128"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
-          class="mb-2 lg:mb-8 w-16 h-16 lg:w-32 lg:h-32"
+          class="
+            mb-2
+            lg:mb-8
+            w-16
+            h-16
+            lg:w-32 lg:h-32
+            fill-current
+            group-hover:text-peach
+          "
         >
           <g clip-path="url(#clip0)">
             <path
               d="M94.8411 18.5049C84.1409 12.4361 73.7415 6.5383 63.342 0.640469C61.5801 -0.342502 59.8612 -0.171551 58.1423 0.811421C39.1483 11.6668 20.1543 22.4795 1.20324 33.335C0.60162 33.6769 0.0429729 34.6598 0.0429729 35.3436C0 57.0118 -0.0429729 78.6371 0.0859458 100.262C0.0859458 101.673 1.16027 103.682 2.32054 104.365C12.5481 110.391 22.9045 116.161 33.261 122.016C33.347 122.059 33.5188 122.016 33.9915 122.016C33.9915 121.204 33.9915 120.349 33.9915 119.537C33.9915 98.2538 34.0345 77.0131 33.9486 55.7296C33.9486 53.7209 34.6791 52.7807 36.3121 51.8832C55.3491 41.1133 74.3431 30.3006 93.3371 19.4879C93.7238 19.2742 94.1536 18.975 94.8411 18.5049Z"
-              fill="#151512"
+              class="text-black group-hover:text-peach"
             />
             <path
               d="M77.9092 128C77.9092 127.017 77.9092 126.205 77.9092 125.436C77.9092 110.563 77.9522 95.6906 77.8662 80.7751C77.8662 78.8518 78.4249 77.8261 80.1438 76.8859C93.3794 69.4922 106.529 61.9704 119.722 54.4912C120.366 54.1493 120.968 53.7647 121.742 53.2946C121.398 52.9954 121.183 52.739 120.882 52.568C112.287 47.6532 103.65 42.7811 95.0983 37.7807C92.5629 36.2849 90.3713 36.2422 87.75 37.738C74.9441 45.1316 62.0522 52.3971 49.1603 59.6625C47.7422 60.4318 47.3125 61.3293 47.3125 62.9106C47.3555 77.7407 47.3555 92.528 47.3125 107.358C47.3125 109.58 48.0001 111.333 49.9768 112.444C58.8722 117.487 67.7246 122.487 76.62 127.53C76.9208 127.701 77.3076 127.787 77.9092 128Z"
-              fill="#151512"
+              class="text-black group-hover:text-peach"
             />
             <path
               d="M122 103.17C111.643 97.2718 101.673 91.6304 91.4458 85.818C91.4458 97.4855 91.4458 108.768 91.4458 120.521C101.587 114.752 111.557 109.11 122 103.17Z"
-              fill="#151512"
+              class="text-black group-hover:text-peach"
             />
           </g>
           <defs>
             <clipPath id="clip0">
-              <rect width="122" height="128" fill="white" />
+              <rect
+                width="122"
+                height="128"
+                fill="white"
+                class="text-black group-hover:text-peach"
+              />
             </clipPath>
           </defs>
         </svg>
@@ -213,6 +247,7 @@ layout: default
             font-bold
             text-l
             lg:text-xxl
+            group-hover:text-peach
           "
         >
           DApp Connect
@@ -227,13 +262,17 @@ layout: default
             opacity-75
             text-left
             max-w-screen-xxs
+            group-hover:text-peach
           "
         >
           The communication layer for Ethereum. A tech stack enabling
           decentralized communication between DApps and people.
         </p>
         <div class="work__link container flex justify-start">
-          <a class="link link--external" href="https://vac.dev/" target="_blank"
+          <a
+            class="link link--external link--dapp group-hover:text-peach"
+            href="https://vac.dev/"
+            target="_blank"
             >Visit DApp Connect</a
           >
         </div>

src/style.css

@@ -35,3 +35,11 @@ html {
 .link--external:hover::after {
   background-color: #151512;
 }
+
+.work__card:hover .link--external::before {
+  background-image: url(/assets/img/arrow-white.svg);
+}
+
+.work__card:hover .link--dapp::before {
+  background-image: url(/assets/img/arrow-peach.svg);
+}

tailwind.config.js

@@ -4,6 +4,7 @@ module.exports = {
     extend: {
       backgroundImage: (theme) => ({
         arrow: "url(/assets/img/arrow.svg)",
+        arrowWhite: "url(/assets/img/arrow-white.svg)",
       }),
     },
     screens: {
@@ -41,9 +42,15 @@ module.exports = {
       xl: ["24px", "32px"],
       xxl: ["32px", "44px"],
     },
+    textColor: {
+      white: "#fff",
+      black: "#151512",
+      peach: "#D1A69D",
+    },
     colors: {
       white: "#fff",
       black: "#151512",
+      peach: "#D1A69D",
     },
   },
   variants: {},