How To Create a Parallax Hover Effect in Framer

How To Create a Parallax Hover Effect in Framer

  • Guide

  • Effects
  • Parallax hover
  • Guide

  • Effects
  • Parallax hover
  • Guide

  • Effects
  • Parallax hover

How To Create a Parallax Hover Effect in Framer

This step-by-step guide shows you how to create an interactive parallax hover effect in Framer. From picking the right image to splitting it into layers and adding hover motion with code overrides, you'll learn everything you need to craft this eye-catching effect.

image of Nandi Muzsik

Posted by

Nandi

Image featuring a creative parallax design effect with Coca-Cola cans against a rocky, abstract background
Image featuring a creative parallax design effect with Coca-Cola cans against a rocky, abstract background
Image featuring a creative parallax design effect with Coca-Cola cans against a rocky, abstract background

Table of contents

Step 1: Picking the right image

Choose an image that works well for this effect. A good image has:

  • Something close up in the foreground

  • A clear middle part (the main focus)

  • A background that adds depth

For example, pick a photo with blurry leaves up front, a rock and bag in the middle, and a calm scene in the back.

Step 1: Picking the right image

Choose an image that works well for this effect. A good image has:

  • Something close up in the foreground

  • A clear middle part (the main focus)

  • A background that adds depth

For example, pick a photo with blurry leaves up front, a rock and bag in the middle, and a calm scene in the back.

Step 1: Picking the right image

Choose an image that works well for this effect. A good image has:

  • Something close up in the foreground

  • A clear middle part (the main focus)

  • A background that adds depth

For example, pick a photo with blurry leaves up front, a rock and bag in the middle, and a calm scene in the back.

Image displaying a stylish Vinta backpack in a natural setting with lush greenery and a rugged rock as the backdrop

Image with blurry leaves up front, a rock and bag in the middle, and a calm scene in the back.

Image displaying a stylish Vinta backpack in a natural setting with lush greenery and a rugged rock as the backdrop

Image with blurry leaves up front, a rock and bag in the middle, and a calm scene in the back.

Image displaying a stylish Vinta backpack in a natural setting with lush greenery and a rugged rock as the backdrop

Image with blurry leaves up front, a rock and bag in the middle, and a calm scene in the back.

Step 2: Splitting the image into layers

To make the parallax effect, break your image into parts. Here’s how:

Using Pixelmator Pro (or Photoshop):

  1. Open the Image: Start by opening your image in Pixelmator Pro or Photoshop.

  2. Duplicate and Mask:

    • Duplicate the image layer and name it "Foreground."

    • Use the selection tool (press Q in Pixelmator Pro) to select the foreground elements, like blurry leaves.

    • Refine your selection with tools like "Smart Refine" and apply a mask.

  3. Create the Middle Layer (Focal Point):

    • Duplicate the original image layer and name it "Focal Point."

    • Remove the foreground elements from this layer using tools like the Clone or Brush tool.

    • Select and mask the focal elements, like the rock and bag.

  4. Prepare the Background:

    • Duplicate the image again and name it "Background."

    • Remove both the foreground and focal point elements, leaving only the background.

    • Refine the edges to ensure smooth transitions.

Exporting the layers:

Save each part (Foreground, Focal Point, and Background) as a PNG file. This keeps the transparent areas intact.

Step 2: Splitting the image into layers

To make the parallax effect, break your image into parts. Here’s how:

Using Pixelmator Pro (or Photoshop):

  1. Open the Image: Start by opening your image in Pixelmator Pro or Photoshop.

  2. Duplicate and Mask:

    • Duplicate the image layer and name it "Foreground."

    • Use the selection tool (press Q in Pixelmator Pro) to select the foreground elements, like blurry leaves.

    • Refine your selection with tools like "Smart Refine" and apply a mask.

  3. Create the Middle Layer (Focal Point):

    • Duplicate the original image layer and name it "Focal Point."

    • Remove the foreground elements from this layer using tools like the Clone or Brush tool.

    • Select and mask the focal elements, like the rock and bag.

  4. Prepare the Background:

    • Duplicate the image again and name it "Background."

    • Remove both the foreground and focal point elements, leaving only the background.

    • Refine the edges to ensure smooth transitions.

Exporting the layers:

Save each part (Foreground, Focal Point, and Background) as a PNG file. This keeps the transparent areas intact.

Step 2: Splitting the image into layers

To make the parallax effect, break your image into parts. Here’s how:

Using Pixelmator Pro (or Photoshop):

  1. Open the Image: Start by opening your image in Pixelmator Pro or Photoshop.

  2. Duplicate and Mask:

    • Duplicate the image layer and name it "Foreground."

    • Use the selection tool (press Q in Pixelmator Pro) to select the foreground elements, like blurry leaves.

    • Refine your selection with tools like "Smart Refine" and apply a mask.

  3. Create the Middle Layer (Focal Point):

    • Duplicate the original image layer and name it "Focal Point."

    • Remove the foreground elements from this layer using tools like the Clone or Brush tool.

    • Select and mask the focal elements, like the rock and bag.

  4. Prepare the Background:

    • Duplicate the image again and name it "Background."

    • Remove both the foreground and focal point elements, leaving only the background.

    • Refine the edges to ensure smooth transitions.

Exporting the layers:

Save each part (Foreground, Focal Point, and Background) as a PNG file. This keeps the transparent areas intact.

Step 3: Bringing the layers into Framer

  1. Upload to Framer: Drag your PNG files into Framer.

  2. Arrange the layers:

    • Stack the layers in order: Foreground on top, Background at the bottom.

    • Group them in a frame and name it "Container."

Set up the frame:

  • Make the frame fill the screen width and height by setting width to "Fill" and height to "100vh."

Step 4: Adding the hover effect

Parallax works by making layers move at different speeds. Here’s how to add that:

Using code overrides:

Here’s the link to the Parallax Hover interaction code override that I made. You’ll need to grab this now.

By applying the override to several elements with differing intensities. The elements in the foreground will move more rapidly, while those in the background move more slowly.

The code override includes three pre-defined intensity levels.

Step 3: Bringing the layers into Framer

  1. Upload to Framer: Drag your PNG files into Framer.

  2. Arrange the layers:

    • Stack the layers in order: Foreground on top, Background at the bottom.

    • Group them in a frame and name it "Container."

Set up the frame:

  • Make the frame fill the screen width and height by setting width to "Fill" and height to "100vh."

Step 4: Adding the hover effect

Parallax works by making layers move at different speeds. Here’s how to add that:

Using code overrides:

Here’s the link to the Parallax Hover interaction code override that I made. You’ll need to grab this now.

By applying the override to several elements with differing intensities. The elements in the foreground will move more rapidly, while those in the background move more slowly.

The code override includes three pre-defined intensity levels.

Step 3: Bringing the layers into Framer

  1. Upload to Framer: Drag your PNG files into Framer.

  2. Arrange the layers:

    • Stack the layers in order: Foreground on top, Background at the bottom.

    • Group them in a frame and name it "Container."

Set up the frame:

  • Make the frame fill the screen width and height by setting width to "Fill" and height to "100vh."

Step 4: Adding the hover effect

Parallax works by making layers move at different speeds. Here’s how to add that:

Using code overrides:

Here’s the link to the Parallax Hover interaction code override that I made. You’ll need to grab this now.

By applying the override to several elements with differing intensities. The elements in the foreground will move more rapidly, while those in the background move more slowly.

The code override includes three pre-defined intensity levels.

The image shows a "Code Overrides" menu with "withIntensity10" selected from intensity options

Look override intensities.

The image shows a "Code Overrides" menu with "withIntensity10" selected from intensity options

Look override intensities.

The image shows a "Code Overrides" menu with "withIntensity10" selected from intensity options

Look override intensities.

Step 5: Test and tweak

Preview your project in Framer. Hover over the image and watch the layers move. Adjust the intensity values if needed to make the effect look just right.

Wrapping Up

This parallax hover effect can work really well for a portfolio, hero section, or product showcase. Try different images and layer setups to make it unique.

And that’s it! Now you know how to create a parallax hover effect in Framer.

All the best mate.

Step 5: Test and tweak

Preview your project in Framer. Hover over the image and watch the layers move. Adjust the intensity values if needed to make the effect look just right.

Wrapping Up

This parallax hover effect can work really well for a portfolio, hero section, or product showcase. Try different images and layer setups to make it unique.

And that’s it! Now you know how to create a parallax hover effect in Framer.

All the best mate.

Step 5: Test and tweak

Preview your project in Framer. Hover over the image and watch the layers move. Adjust the intensity values if needed to make the effect look just right.

Wrapping Up

This parallax hover effect can work really well for a portfolio, hero section, or product showcase. Try different images and layer setups to make it unique.

And that’s it! Now you know how to create a parallax hover effect in Framer.

All the best mate.

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

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

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

More posts

  • User interface showcasing a 3D model of a sculpted hand, with options for adjusting the stone texture and properties such as metalness, roughness, and color, from a side panel displaying various stone textures to choose from

    The Secret Tool for Adding 3D Objects to Your Websites

    Tips & tricks

    User interface showcasing a 3D model of a sculpted hand, with options for adjusting the stone texture and properties such as metalness, roughness, and color, from a side panel displaying various stone textures to choose from

    The Secret Tool for Adding 3D Objects to Your Websites

    Tips & tricks

    User interface showcasing a 3D model of a sculpted hand, with options for adjusting the stone texture and properties such as metalness, roughness, and color, from a side panel displaying various stone textures to choose from

    The Secret Tool for Adding 3D Objects to Your Websites

    Tips & tricks

  • Content management system interface on a dark theme showing collections of resources, lessons, and blogs in Framer University

    The Secret to Flexible CMS Pages in Framer

    Tips & tricks

    Content management system interface on a dark theme showing collections of resources, lessons, and blogs in Framer University

    The Secret to Flexible CMS Pages in Framer

    Tips & tricks

    Content management system interface on a dark theme showing collections of resources, lessons, and blogs in Framer University

    The Secret to Flexible CMS Pages in Framer

    Tips & tricks

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

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