如何实现这种悬停效果? [英] How to achieve this hover effect?

问题描述

我试图弄清楚如何在此网站上实现对链接的悬停效果(在工作"部分中): http ://weaintplastic.com/

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

可以用CSS动画完成吗?还是涉及JavaScript?

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

我尝试使用CSS过渡，但是无法同时移动两个元素.

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

谢谢！

推荐答案

可以使用CSS:hover选择器来完成.

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);

他们正在提供上部文本

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.

CSS链接如下:

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

通过这种方式，当悬停.project-link时，底部和上部文本将同时获得动画效果.

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

这篇关于如何实现这种悬停效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！