[resolved] Make Links "Dance" When Hovered (4 posts)

  1. FreelanceHacker
    Posted 3 years ago #

    I visited a site that had a great feature I want to ... um... borrow.

    When you hover over one of their links, it moves slightly to let you know you have highlighted that particular link.

    Anyone know how I might make that happen myself?


    FYI: To credit the source I found the trick at WooThemes in their footer widgets... Scroll to the bottom of their site to see what I'm talking about.

  2. Michael
    Forum Moderator
    Posted 3 years ago #

    format the a:hover with a different left margin or padding as the link.


  3. Amy Hendrix (sabreuse)

    Posted 3 years ago #

    WooThemes does it with this:

    #footer #sitemap ul li a:hover {
    text-decoration: none;
    position: relative;
    left: 2px;
    -webkit-transition: all ease-in-out .2s;
    -moz-transition: all ease-in-out .2s;
    -ms-transition: all ease-in-out .2s;
    -o-transition: all ease-in-out .2s;
    transition: all ease-in-out .2s;

    The position attribute sets the final position, and the transition stuff provides the animation effect.

  4. FreelanceHacker
    Posted 3 years ago #

    You guys are awesome!

    Thanks to both of you!


Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.