adding animation to footer menus

Store Design
, , , , , , , , ,

Topic summary

A user seeks help adding animations to footer menu links, similar to those in their header menu. They provide a test store link and password for reference.

Solutions Provided:

  • First approach: CSS-based slide-in animation using translateY and opacity transitions, triggered when the footer enters viewport. Includes optional hover effects with color changes and underlines.

  • Second approach (marked as solution): Simpler CSS implementation using ::after pseudo-elements to create animated underline effects on hover. Includes media query for screens 750px+ and smooth transitions (0.3s). A video recording demonstrates the result.

Outcome:
The original poster confirms the second solution works perfectly and expresses gratitude. The issue appears resolved with working CSS code for footer link hover animations.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
3

Hello @technase ,
firstly remove this and add below i have given,

@media screen and (min-width: 750px) {
    .footer-block__details-content .list-menu__item--link:hover, .copyright__content a:hover {
        text-decoration: underline; 
       text-underline-offset: .3rem; 
    }
}

footer .footer-block__details-content a{
 position: relative;
}

footer .footer-block__details-content a::after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 2px;
    background: #000;
    top: 70%;
    left: 0;
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
}

footer .footer-block__details-content a:hover::after{
  width: 100%;
}

check this recording for result : https://www.awesomescreenshot.com/video/32813231?key=5f94425164e14c9c65e15faa8ebd0297

1 Like