Add a scale-on-hover effect to various elements :)

UR-dandyhacks · Oct 17, 2023 · eaab5bd · eaab5bd
1 parent 402802c
commit eaab5bd
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -16,10 +16,10 @@ <h3 class="text-2xl"><a href="#hero">DandyHacks &OpenCurlyQuote;23</a></h3>
       <div class="fixed top-0 left-0 w-screen h-screen bg-black opacity-0 pointer-events-none peer-checked:pointer-events-auto transition-opacity peer-checked:opacity-50 md:hidden"></div>
       <img class="relative z-40 md:hidden" src="img/icons/hamburger.png" />
       <ul class="fixed top-0 right-0 z-30 flex flex-col h-screen pt-32 text-3xl font-bold transition-transform gap-8 md:flex-row md:text-xl px-9 md:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 md:bg-deep-purple md:translate-x-0 md:w-fit md:h-fit md:relative md:gap-16 md:transition-none">
-        <li class="text-right"><a href="#about">About</a></li>
-        <li class="text-right"><a href="#tracks">Tracks</a></li>
-        <li class="text-right"><a href="#faq">FAQ</a></li>
-        <li class="hidden text-right lg:block"><a href="#sponsoring">Sponsoring</a></li>
+        <li class="text-right hover:scale-110 transition-transform origin-center"><a href="#about">About</a></li>
+        <li class="text-right hover:scale-110 transition-transform origin-center"><a href="#tracks">Tracks</a></li>
+        <li class="text-right hover:scale-110 transition-transform origin-center"><a href="#faq">FAQ</a></li>
+        <li class="hidden text-right hover:scale-110 transition-transform origin-center lg:block"><a href="#sponsoring">Sponsoring</a></li>
       </ul>
     </div>
     <a id="mlh-trust-badge" style="
@@ -54,13 +54,13 @@ <h2 class="text-2xl lg:text-4xl text-purple">November 3-5</h2>
           </div>
         </div>
         <div class="flex flex-col items-center justify-center font-bold md:flex-row gap-7 md:max-lg:relative md:max-lg:bottom-14">
-          <a class="flex items-center justify-center px-6 py-4 text-xl rounded-full lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-lavender" href="https://docs.google.com/forms/d/e/1FAIpQLSf0fuT8o8gTrG9d8flxtpRD1JkOzHu8tEXG-wXM3KiNzhHRyw/viewform?usp=sf_link" target="_blank">Register</a>
-          <a class="flex items-center justify-center px-6 py-4 text-xl rounded-full lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-purple" href="https://discord.gg/SbNBkUK6Cr" target="_blank">Join Discord</a>
+          <a class="flex items-center justify-center px-6 py-4 text-xl rounded-full hover-scale lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-lavender" href="https://docs.google.com/forms/d/e/1FAIpQLSf0fuT8o8gTrG9d8flxtpRD1JkOzHu8tEXG-wXM3KiNzhHRyw/viewform?usp=sf_link" target="_blank">Register</a>
+          <a class="flex items-center justify-center px-6 py-4 text-xl rounded-full hover-scale lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-purple" href="https://discord.gg/SbNBkUK6Cr" target="_blank">Join Discord</a>
         </div>
       </div>
     </div>
     <div class="flex flex-row items-center justify-center gap-[77px] relative">
-      <img class="hidden lg:self-start lg:block" src="img/sticker2.png" />
+      <img class="hidden hover-scale lg:self-start lg:block" src="img/sticker2.png" />
       <div class="px-9 lg:px-0 lg:flex-[0_0_454px] flex flex-col gap-7 lg:gap-14 mb-16 lg:mb-[150px]">
         <h2 class="text-2xl lg:text-5xl">
           <div id="about" class="absolute -top-20"></div>
@@ -83,7 +83,7 @@ <h2 class="text-2xl lg:text-5xl">
           </p>
         </div>
       </div>
-      <img class="hidden lg:block lg:relative lg:b-[150px]" src="img/sticker1.png" />
+      <img class="hidden hover-scale lg:block lg:relative lg:b-[150px]" src="img/sticker1.png" />
     </div>
     <div class="relative flex flex-row items-center justify-center text-xl bg-violet">
       <div class="flex flex-col grow-0 items-center w-full gap-7 lg:gap-11 px-9 lg:px-0 lg:w-[999px] box-border text-base lg:text-xl">
@@ -98,23 +98,23 @@ <h2 class="text-5xl">
           depending on which prize you want to win!
         </p>
         <div class="flex flex-col p-12 lg:flex-row gap-12">
-          <div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6">
+          <div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6 hover-scale">
             <img class="w-40 mx-auto my-9" src="img/tracks/entertainment.svg" alt="A window with a video player" />
             <h3 class="mb-4 text-2xl text-center font-display">Entertainment</h3>
             <p class="text-center">
               What innovative platforms can be created for content creation and
               distribution?
             </p>
           </div>
-          <div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6">
+          <div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6 hover-scale">
             <img class="w-40 mx-auto my-9" src="img/tracks/productivity.svg" alt="A to-do lists with 2 items, both of which are checked" />
             <h3 class="mb-4 text-2xl text-center font-display">Productivity</h3>
             <p class="text-center">
               What innovative tools or applications can help streamline workflow
               and task management?
             </p>
           </div>
-          <div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6">
+          <div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6 hover-scale">
             <img class="w-40 mx-auto my-9" src="img/tracks/emerging-tech.svg" alt="A gear with a light bulb inside the hole" />
             <h3 class="mb-4 text-2xl text-center font-display">Emerging Tech</h3>
             <p class="text-center">
@@ -215,13 +215,13 @@ <h2 class="text-5xl">FAQS</h2>
           </details>
         </div>
       </div>
-      <div class="flex-col items-center hidden mb-24 pointer-events-none lg:flex gap-20">
+      <div class="flex-col items-center hidden mb-24 lg:flex gap-20">
         <h2 class="text-5xl">
           <div id="sponsoring" class="absolute -top-20"></div>
           Sponsoring
         </h2>
-        <div class="flex flex-row gap-24">
-          <div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl">
+        <div class="flex flex-row pointer-events-none gap-24">
+          <div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl hover-scale pointer-events-auto">
             <h3 class="text-3xl text-center pb-7">What does a sponsor do?</h3>
             <p>Sponsors enable us to:</p>
             <ul class="list-disc list-inside">
@@ -230,23 +230,24 @@ <h3 class="text-3xl text-center pb-7">What does a sponsor do?</h3>
                   from our hackers</b></li>
             </ul>
           </div>
-          <div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl">
+          <div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl hover-scale pointer-events-auto">
             <h3 class="text-3xl text-center pb-7">Why sponsor?</h3>
             <p>As a sponsor, you will be able to:</p>
             <ul class="list-disc list-inside">
               <li>
-                Connect with top students, and get early access to resumes and
-                portfolios.
+                Connect with <b>top students</b>, and get <b>early access</b> to
+                resumes and portfolios.
               </li>
               <li>
-                Showcase your products and see talented students make cool hacks
-                with them.
+                <b>Showcase your products</b> and see talented students make
+                cool hacks with them.
               </li>
               <li>
-                Inspire the next generation of developers to find pride and joy in
-                building awesome things.
+                <b>Inspire the next generation</b> of developers to find pride
+                and joy in building awesome things.
               </li>
-              <li>Attract next generation talent for tech development programs.</li>
+              <li><b>Attract next generation talent</b> for tech development
+                programs.</li>
             </ul>
           </div>
         </div>
@@ -256,10 +257,10 @@ <h3 class="text-3xl text-center pb-7">Why sponsor?</h3>
       <div class="flex flex-col items-center gap-5">
         <span class="hidden font-bold lg:inline">[email protected]</span>
         <div class="flex gap-2.5 items-center">
-          <a href="mailto:[email protected]"><img src="img/social/mail.svg"></a>
-          <a href="https://www.instagram.com/dandyhacks"><img src="img/social/instagram.svg"></a>
-          <a href="https://www.facebook.com/DandyHacks"><img src="img/social/facebook.svg"></a>
-          <a href="https://twitter.com/dandyhacks"><img src="img/social/twitter.svg"></a>
+          <a class="hover:scale-110 transition-transform origin-center" href="mailto:[email protected]"><img src="img/social/mail.svg"></a>
+          <a class="hover:scale-110 transition-transform origin-center" href="https://www.instagram.com/dandyhacks"><img src="img/social/instagram.svg"></a>
+          <a class="hover:scale-110 transition-transform origin-center" href="https://www.facebook.com/DandyHacks"><img src="img/social/facebook.svg"></a>
+          <a class="hover:scale-110 transition-transform origin-center" href="https://twitter.com/dandyhacks"><img src="img/social/twitter.svg"></a>
         </div>
       </div>
       <div class="flex flex-col items-center mb-5 gap-5 lg:mb-0">

diff --git a/main.css b/main.css
@@ -50,6 +50,10 @@
     z-index: 10;
   }
 
+  .hover-scale, details {
+    @apply hover:scale-105 transition-transform origin-center;
+  }
+
   /* Parallax effect */
 
   .wrapper {

diff --git a/styles.css b/styles.css
@@ -936,6 +936,10 @@ h1, h2, h3, h4, h5, h6 {
   border-collapse: separate;
 }
 
+.origin-center {
+  transform-origin: center;
+}
+
 .-translate-y-full {
   --tw-translate-y: -100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2711,6 +2715,19 @@ canvas {
   z-index: 10;
 }
 
+.hover-scale, details {
+  transform-origin: center;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.hover-scale:hover, details:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 /* Parallax effect */
 
 .wrapper {
@@ -2801,6 +2818,12 @@ canvas {
   }
 }
 
+.hover\:scale-110:hover {
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:font-bold:hover {
   font-weight: 700;
 }