Search code examples
csshovermousehover

How to achieve this hover effect?

I'm trying to figure out how the hover effect on links (in the WORK section) is achieved on this website: http://weaintplastic.com/

Can it be done with CSS animations? Or is there JavaScript involved?

I tried using CSS transition, but I can't get both elements to move at the same time.

Thanks!

Solution

  • It can be done with CSS :hover selector.

    What they are doing here is they are giving the bottom text 

    opacity: 0;
transform: translateY(-10px);
transition: .25s cubic-bezier(.165,.84,.44,1);

    and they are giving the upper text 

    transform: translateY(10px);
transition: .25s cubic-bezier(.165,.84,.44,1);

    What that does is smoothly rearranges the text, as well as hides the bottom one.

    Edit:

    The CSS is linked like this:

    .project-link:hover .link__headline
.project-link:hover .link__subline

    In this way, when .project-link gets hovered, bottom and upper text get animated at the same time.