Merge pull request #502 from torchbox/feature/4342-hover-effect-on-cl…

…ient-logos Add CTA links to the Clients logos on hover & focus
torchbox · Jul 4, 2023 · 83dfe72 · 83dfe72
2 parents 2467a27 + c19659e
commit 83dfe72
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 12 deletions.
diff --git a/...project_styleguide/templates/patterns/molecules/streamfield/blocks/client-logo-block.html b/...project_styleguide/templates/patterns/molecules/streamfield/blocks/client-logo-block.html
@@ -10,6 +10,7 @@
                                 {% with link=client.link.0.value %}
                                 <a class="client-item__link" href="{{ link.url }}" title="{{ link.text }}">
                                     {% image client.image width-400 class="client-item__image" loading="lazy" alt="" %}
+                                    <span class="client-item__cta" aria-hidden="true">Read case study</span>
                                 </a>
                                 {% endwith %}
                             </div>

diff --git a/tbx/static_src/sass/components/_client-block.scss b/tbx/static_src/sass/components/_client-block.scss
@@ -24,12 +24,15 @@
         }
 
         @include media-query(large) {
+            grid-template-columns: repeat(4, 1fr);
+        }
+
+        @include media-query(menu-break-larger) {
             grid-template-columns: repeat(6, 1fr);
-            column-gap: 20px;
         }
 
         @include media-query(x-large) {
-            column-gap: 130px;
+            column-gap: 60px;
         }
 
         &--spaced {

diff --git a/tbx/static_src/sass/components/_client-item.scss b/tbx/static_src/sass/components/_client-item.scss
@@ -18,17 +18,25 @@
 
     &__image {
         width: 100%;
-        height: 100%;
-        transition: box-shadow $transition-quick;
+        align-self: center;
+        // for smooth scaling without shifting the image
+        transform: scale3d(1, 1, 1);
+        transition: transform $transition-quick;
 
         #{$root}__link:hover & {
-            box-shadow: 2px 2px 10px var(--color--grey);
+            transform: scale3d(1.05, 1.05, 1.05);
         }
     }
 
     &__link {
-        display: block;
+        height: 100%;
+        display: grid;
+        grid-template-rows: 1fr;
         border-bottom: 2px solid transparent; // prevent layout shift
+
+        @include media-query(large) {
+            grid-template-rows: 2fr 1fr;
+        }
     }
 
     .streamfield & {
@@ -39,20 +47,68 @@
             content: none; // don't show li arrow
         }
 
-        #{$root}__link:hover {
-            // don't show link underline inherited from streamfield links
-            border-bottom: 2px solid transparent;
+        #{$root}__link {
+            &:hover {
+                // don't show link underline inherited from streamfield links
+                border-bottom: 2px solid transparent;
+            }
+
+            // show CTA link only on desktop
+            @include media-query(large) {
+                &:focus,
+                &:hover {
+                    #{$root}__cta {
+                        color: var(--color--link);
+
+                        /* stylelint-disable-next-line max-nesting-depth */
+                        &::after {
+                            background-color: var(--color--accent);
+                        }
+                    }
+                }
+            }
         }
 
         #{$root}__container {
+            height: 100%;
             padding: 0 15px;
 
             @include media-query(medium) {
                 padding: 0 30px;
             }
+        }
+
+        #{$root}__cta {
+            display: none;
+            align-items: flex-start;
+            justify-content: center;
+            position: relative;
+            margin-top: 10px;
+            color: transparent;
+            font-size: rem(16px);
+            font-weight: $weight--medium;
+            transition: color $transition-quick;
 
             @include media-query(large) {
-                padding: 15px;
+                display: flex;
+            }
+
+            &::after {
+                content: '';
+                display: block;
+                position: relative;
+                right: -5px;
+                top: 5px;
+                flex-grow: 0;
+                flex-shrink: 0;
+                background-color: transparent;
+                clip-path: $arrow-path;
+                transition: color $transition;
+
+                @include media-query(large) {
+                    width: 20px;
+                    height: 18px;
+                }
             }
         }
     }

diff --git a/tbx/static_src/sass/components/_footer.scss b/tbx/static_src/sass/components/_footer.scss
@@ -55,10 +55,10 @@
     }
 
     &__logos-image {
-        transition: box-shadow $transition-quick;
+        transition: transform $transition;
 
         #{$root}__logos-link:hover & {
-            box-shadow: 2px 2px 10px var(--color--grey);
+            transform: scale(1.1);
         }
     }