The Blog

Webflow news, tutorials and tricks

How to create a cool slide in out hover interaction with Webflow

Want to do a fun hover animation with slide in text for your next project? I've made a short video to show you how it's done and there's also a link to the cloneable example project.

Estimated reading time:
2 minutes

Merry Xmas everyone!

In this blog post I show you how to create a super simple hover animation with Webflow. I've used this technique on an actual client site which required several video testimonials to be placed on a page. As soon as the user hovers over a testimonial image, the animation starts and makes the name of the person giving the testimonial, as well as a play button visible. On click the actual testimonial video appears.

I've recorded a 2 minute video of how this is done and have also created a cloneable asset (accessible in the Webflow showcase), so you can easily use the effect in your own projects. You can find the cloneable project here: https://webflow.com/website/Webflow-Components

This might also interest you...

My journey of becoming a Webflow website designer

Want to know how I got started and became a Webflow designer? Then, listen up! You'll find a brief rundown of how I got to where I am now, as I haven't only switched continents but also moved from print to web/digital design...

Read more...

New Webflow Meetup Group in Perth, Australia

Are you based in Perth, Australia? Great - I've just established the city's first Webflow Meetup Group. Check out this post for all the details and for some more info on how to start a meetup group in your own hometown.

Read more...

Matterport: What it is and how you can integrate it into your next Webflow project

Ever heard of Matterport? The service allows you to place virtual walkthroughs on your client's website. This could be especially useful for real estate agents and tourism businesses. Let me show you how to easily integrate this feature into your next Webflow project.

Read more...