Hover Animation Over Image

Design help Animations & Interactions
1

Does anyone know how to create the hover animation on this page (scroll down to where it says “Shoutouts”?

Thanks!

https://www.rockvalleycollege.edu/

Here is my public share link: LINK
(how to access public share link)

2

In a little simple explanation, you just animating that block from certain height like 120px to 100%

And that block should have position: absolute with bottom: 0 so that it remain at the bottom and when height increases it goes upwards not down.

And that hidden content is just animating from opacity: 0% to opacity: 100%

With Webflow interaction, you apply the hover interaction to the parent and target that content block and the hidden content block.

To explain with CSS, in simplest way it should be like below. Just try to replicate this with Webflow interaction. And if are doing through CSS then you should add transition to content block and that hidden block.

.parent_div .content_div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
}

.parent_div .content_div .hidden_content {
    opacity: 0;
}

.parent_div:hover .content_div {
    height: 100%;
}

.parent_div:hover .content_div .hidden_content {
    opacity: 100%;
}

I hope this helps.

1 Like