Merge pull request opensourcecatholic#89 from JohnRDOrazio/feat/issue-88

create hover animation on cover page booklet
JohnRDOrazio · Sep 24, 2021 · 1d9d679 · 1d9d679
2 parents fa5a80e + 9880153
commit 1d9d679
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss
@@ -10,3 +10,24 @@ label.required::before, legend.required::before {
     content: "*";
     padding-right: 3px;
 }
+
+.booklet-hover {
+    filter: drop-shadow( 0px 3px 9px rgba(0, 0, 0, 0.3));
+    transform-style: preserve-3d;
+    box-sizing: border-box;
+    margin: 30px 10px 10px;
+    perspective: 1200px;
+}
+
+.booklet-hover svg {
+    filter: drop-shadow( 0px 1px 2px rgba(0, 0, 0, 0.2));
+}
+
+.booklet-hover:hover {
+    filter: drop-shadow( 0px 3px 17px rgba(0, 0, 0, 0.5));
+}
+
+.booklet-hover:hover svg {
+    transform: rotateY(-20deg) rotateZ(0deg);
+    filter: drop-shadow( 3px 0 12px rgba(0, 0, 0, 0.6));
+}
diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
@@ -4,9 +4,11 @@
                 <!-- Column 1 Content -->
         </div>
 
-        <div class="my-auto px-3 w-1/3 overflow-hidden text-center">
+        <div class="px-3 w-1/3 overflow-hidden text-center h-screen relative">
                 <!-- Column 2 Content -->
-                <%= inline_svg_pack_tag("media/images/cover.svg", class: "mx-auto", style: "max-height: 90vh; filter: drop-shadow( 4px 2px 3px rgba(0, 0, 0, 0.3));") %>
+                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 -rotate-3 h-1/2 hover:-rotate-6 transition duration-200 booklet-hover bg-white">
+                <%= inline_svg_pack_tag("media/images/cover.svg", class: "h-full transition duration-300 origin-left") %>
+                </div>
         </div>
 
         <div class="my-auto px-3 w-1/3 overflow-hidden">