CODEWITHSUNDEEP
csshovermousehover
Eleana Tyradelli
Eleana Tyradelli

Reputation: 21

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!

Upvotes: 1

Views: 186

Answers (3)

ali6p
ali6p

Reputation: 1763

It can be done with only using CSS animation. I made an example: 

body {
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

a {
  text-decoration: none;
  color: black;
}

a.animation-link {
  letter-spacing: .1em;
  font-weight: bold;
}

.animation-link .link__headline,
.animation-link .link__subline {
  -webkit-transition: .25s cubic-bezier(.165, .84, .44, 1);
  -webkit-transform: translateY(0);
}

.animation-link .link__headline {
  display: block;
  font-size: 1.25em;
}

.animation-link:hover .link__headline {
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
}

.animation-link .link__subline {
  display: inline-block;
  margin: 0;
  background-color: transparent;
  transition: .25s cubic-bezier(.165, .84, .44, 1);
  -ms-transform: translateY(0);
  transform: translateY(0);
  min-width: 0;
  opacity: 1;
  color: green;
}

.animation-link:hover .link__subline {
  opacity: 0;
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
}
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
</head>

<body>
  <a class="animation-link" href="#">
    <span class="link__headline">Pulp Fiction Movie</span>
    <h6 class="link__subline">by Quentin Tarantino</h6>
  </a>
</body>

</html>

Upvotes: 0

Allen Jing
Allen Jing

Reputation: 89

It can be done with CSS:

.project-nav .project-link:hover .link__headline {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
}

.project-nav .project-link:hover .link__subline {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
}

Upvotes: 1

Mahatmasamatman
Mahatmasamatman

Reputation: 1535

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.

Upvotes: 0

Related Questions