Re-implemented footer hover animations

Author: JulianPrieber

littlelink/css/animations.css

@@ -3,6 +3,7 @@
 - Entrance animations
 - Button hover animations
 - Icon hover animations
+- Footer hover animations
 
 */
 
@@ -51,7 +52,7 @@
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 /* (Also apply to icon) */
 
-.button-hover{
+.button-hover, .credit-hover{
     display:inline-block;
     -webkit-transform:perspective(1px) translateZ(0);
     transform:perspective(1px) translateZ(0);
@@ -61,7 +62,9 @@
     -webkit-transition-property:transform;
     transition-property:transform
 }
-.button-hover:active,.button-hover:focus,.button-hover:hover{
+.button-hover:active,.credit-hover:active, 
+.button-hover:focus,.credit-hover:focus, 
+.button-hover:hover,.credit-hover:hover{
     -webkit-transform:scale(1.1);
     transform:scale(1.1)
 }
@@ -144,4 +147,25 @@
         -webkit-transform:translateY(0);
         transform:translateY(0)
     }
-}
+}
+
+
+/* Footer hover animations
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+.footer-hover{
+    display:inline-block;
+    -webkit-transform:perspective(1px) translateZ(0);
+    transform:perspective(1px) translateZ(0);
+    box-shadow:0 0 1px rgba(0,0,0,0);
+    -webkit-transition-duration:.3s;
+    transition-duration:.3s;
+    -webkit-transition-property:transform;
+    transition-property:transform;
+    -webkit-transition-timing-function:ease-out;
+    transition-timing-function:ease-out
+}
+.footer-hover:active,.footer-hover:focus,.footer-hover:hover{
+    -webkit-transform:translateY(-8px);
+    transform:translateY(-8px)
+}

resources/views/layouts/footer.blade.php

@@ -1,16 +1,16 @@
 <div class="container">
 <div class="footer fadein" style="margin:5% 0px 35px 0px;">
 @if(env('DISPLAY_FOOTER') === true)
-    <a class="hvr-float spacing" href="{{ url('') }}/">Home</a>
-    <a class="hvr-float spacing" href="{{ url('') }}/pages/terms">Terms</a>
-    <a class="hvr-float spacing" href="{{ url('') }}/pages/privacy">Privacy</a>
-    <a class="hvr-float spacing" href="{{ url('') }}/pages/contact">Contact</a>
+    <a class="footer-hover spacing" href="{{ url('') }}/">Home</a>
+    <a class="footer-hover spacing" href="{{ url('') }}/pages/terms">Terms</a>
+    <a class="footer-hover spacing" href="{{ url('') }}/pages/privacy">Privacy</a>
+    <a class="footer-hover spacing" href="{{ url('') }}/pages/contact">Contact</a>
 @endif
 </div>
 
 @if(env('DISPLAY_CREDIT') === true)
 <div class="credit-footer"><a style="text-decoration: none;" class="spacing" href="https://littlelink-custom.com" target="_blank" title="Learn more">
-	<section class="hvr-grow fadein">
+	<section class="credit-hover hvr-grow fadein">
 		<div class="parent-footer credit-icon" >
 			<img id="footer_spin" class="footer_spin image-footer1 generic" src="{{ asset('littlelink/images/just-gear.svg') }}" alt="LittleLink Custom"></img>
 			<img class="image-footer2" src="{{ asset('littlelink/images/just-ll.svg') }}" alt="LittleLink Custom"></img>