Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Can anyone please explain the gradient property hover effect that chris has used on the home page

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #45694
    madhvik
    Member

    .link-list a > span {
    background: -moz-linear-gradient(left center , #FFFFFF, #FFFFFF 5%, rgba(255, 255, 255, 0.25) 5%, rgba(255, 255, 255, 0)) repeat scroll 100% 0 / 200% 100% transparent;
    bottom: 0;
    height: 1px;
    left: 0;
    margin-bottom: 3px;
    pointer-events: none;
    position: absolute;
    transition: background 0s linear 0s;
    width: 100%;
    }
    .link-list a:hover > span, .link-list a:focus > span {
    background-position: -100% 0;
    transition: background 0.4s ease 0s;
    }

    #139564
    madhvik
    Member

    Please refer to the home page of css tricks,the hover effect on list items in the footer

    #139576
    Paulie_D
    Member

    Chris goes into it as part of the Lodge video series concerning the CSS-Trick redesign.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.