Creating a Card Link Animation On Hover in Webflow

John
August 18, 2022

Why just have a link block link to another page or post when you can have a unique animation letting the user know that they can go to another page? In the above tutorial I go over how to create a unique card animation in Webflow to add more style to your site.

The interaction mentioned in the video can be cloned for free here: https://webflow.grsm.io/interaction?interaction=webdev-for-you-interaction-159.

This animation was inspired by the cards on this site here: https://worldaftercovid.info/.

The steps to re-create the interaction are as follows:

Step 1: Create the structure for the card

  • Add a link block and name it “card-wrapper.” Set the display setting to flex, horizontal, align center, and justify center. Set the width to 500px and the height to 500px. Set the position to relative. Ensure that the underline text decoration is removed from the link block and that a color is selected for the link block text.
  • Add a text block inside of the “card-wrapper” and name it “card-text.” This will be the main text in the center of the card. Make this text large as to stand out in the card.
  • Next add a div block and call it “card-number-wrapper.” Set the display setting to flex, vertical, align center, and justify start. Set the position to absolute and position it to the right of the “card-text.” Set the width and height to the size of the text that will be inside of it. In this case I used 30px by 30px since I sized the text inside of it to be 30px.
  • Inside of the “card-number-wrapper” add a text block and name it “card-number-one.” Set the width to 30px and the height to 30px. Set the font size to 30px. This can be adjust to the desired size for this superscript number. The width and height should match the font size.
  • Copy “card-number-one,” duplicate the class and call it “card-number-two.” The two number should be stacked on top of each other.
  • Add a div block and call it “explore-wrapper.” Set the display to flex, horizontal, align center, and justify start. Set the position to absolute and place it in the bottom-right.
  • Add a text block in the “explore-wrapper.” Style it and set the text to “Explore.”
  • Add a div block inside of the “explore-wrapper” and name it “explore-arrow-wrapper.” Set the width to 85px. Set the position to relative.
  • Add an image element inside of the “explore-arrow-wrapper” and add an arrow icon the same color as the text. Call the image “color-1-arrow.”
  • Copy and paste this arrow, duplicate the class, and call it “color-2-arrow.” Replace the arrow with a second arrow of a different color. Set the position of this second arrow absolute and full so both arrows are stacked on top of each other.

Step 2: Create the interaction

The interaction is a bit involved so I recommend reviewing the video on how it is created. The basic steps are as follows:

  • Click on the “card-wrapper” and create a hover interaction.
  • On hover-in change the background color of the card, change the text color of the “card-text,” “card-number-one,” “card-number-two,” and the “explore-text.” Move the super-script numbers up 100% and have the opacity for the first one fade to 0% and the second one should come in at 100%. The second superscript number should start with an initial opacity of 0% as well as the second arrow. Move the “explore-arrow-wrapper” 20px to the right. Set the opacity of the first arrow to 0% and the opacity of the second arrow to 100%.
  • On hover out remove any initial states and reset all the colors and positions of the elements back to their original position.

That is a quick summary of the interaction. There are more details in the video above.

That’s it! You have now created a card link animation on hover!

To get started in Webflow click here: https://webflow.grsm.io/get-started.

As a photographer, it’s important to get the visuals right while establishing your online presence. Having a unique and professional portfolio will make you stand out to potential clients. The only problem? Most website builders out there offer cookie-cutter options — making lots of portfolios look the same.

That’s where a platform like Webflow comes to play. With Webflow you can either design and build a website from the ground up (without writing code) or start with a template that you can customize every aspect of. From unique animations and interactions to web app-like features, you have the opportunity to make your photography portfolio site stand out from the rest.

So, we put together a few photography portfolio websites that you can use yourself — whether you want to keep them the way they are or completely customize them to your liking.

12 photography portfolio websites to showcase your work

Here are 12 photography portfolio templates you can use with Webflow to create your own personal platform for showing off your work.

1. Jasmine