How to Create an Image Cursor Hover Interaction in Framer

  • Guide

  • Image cursor
  • Hover
  • Interaction

How to Create an Image Cursor Hover Interaction in Framer

Learn how to create a smooth hover cursor in Framer, as seen on the Yard.me website. I’ll outline the basic steps for you in this blog.

image of Nandi Muzsik

Posted by

Nandi

Interactive image hover effect with bold typography and a Cybertruck

Table of contents

Hover image cursor.

First, I started by grouping two text layers and turning them into a component with three variants:

  • Default (regular state)

  • Grey (dimmed state)

  • Hover (highlighted state)

I set up interactions between these variants so that when hovered, the text smoothly transitions to the highlighted state. This created the foundation of the hover effect.

Expanding the component

Next, I duplicated this component with different titles, wrapped them in a stack, and created a text layers component.

I added five variants for the five different text layers. The logic here is simple: when one text element is hovered, it remains highlighted while the rest switch to the grey state. To achieve this, I used mouse enter and mouse leave interactions that switch between all five variants.

Animated text effect with highlighted transitions in a dark UI design

The six variants of the text layers component.

Adding a custom image cursor

Now for the fun part — To make the interaction feel even better, I created an image cursor component. Then, I assigned it as a custom cursor to specific text layers in the default variant. This ensures that the image cursor only appears when hovering over those elements.

By doing this, we replace the standard mouse pointer with a custom image, making the interaction feel more unique and engaging.

Cursor customization settings with follow and transition options in UI design

The custom cursor (image cursor component) assigned for variant 1.

Pro tip: On mobile, hover effects won’t work as there’s no cursor. Instead, you can: Create a mobile variant where the effect is disabled. Remove the image cursor for mobile users.

That’s a wrap

To recap on how it all works:

  • Text hover effect: Created by grouping two text layers into a component with three variants (default, grey, hover) and setting up smooth transitions.

  • Managing variants: Added five text layer variants so that when one is hovered, it remains highlighted while the rest switch to grey.

  • Custom cursor: Created an image cursor component and assigned it to specific text layers so that it only appears on hover.

If you wanna play around with the project already made, feel free to remix the hover cursor component I put together, or watch the complete tutorial if you want to dive deeper.

With these steps, the hover effect is complete! Now, when users hover over a text layer, the text animates smoothly, the background adapts, and a custom cursor appears for a polished interactive experience.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More posts

  • Framer loading shimmer animation with draggable progress slider at 37%

    How to Create a Text Shimmer Effect in Framer

    Guide

  • Framer layout with scroll animation and sticky element setup

    How to Create Any Scroll Animation in Framer

    Guide

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback