Create Dynamic Images for Mouse Follower in Motion.page!

In this video, we will show you how to add awesome curves to your sections as you scroll down.

In this video, Luke walks through how to dynamically display featured images on the cursor when hovering over blog cards. Using the new Image/Video Cursor option within the Mouse Follower trigger (introduced in Motion Page 2.2), this effect allows you to create a rich, interactive hover experience powered by real post data — no custom JavaScript required.

Steps

Preparing the Posts and Layout:

Create Blog Posts:

Luke begins with three example posts already created: Marquee Effect, MorphSVG, and Scramble Text. Each post includes dummy content and a featured image.

Build the Page in Bricks Builder:

A simple homepage is created, featuring a custom grid layout displaying blog post cards via a query loop. Each card includes dynamic fields: title, excerpt, author name, and time since publication. Clicking a card links to the respective single post template.

Adding the Cursor Effect in Motion Page:

Create a New Timeline:

A new timeline is created and linked to the homepage only.

Enable Mouse Follower Trigger:

The timeline uses the Mouse Follower trigger. Luke selects Image/Video Cursor to display media on hover.

Apply the Required Attribute:

Bricks Builder is used to add the attribute mp-cursor-media to each card. Since the layout uses a query loop, this automatically applies the attribute to each instance.

Styling the Hover Media:

Initial Test with Static Image URL:

To verify the setup, a static image URL from Unsplash is inserted. Upon refresh, the image appears correctly when hovering over each card.

Apply Custom Styling to Media:

  • Width: 450px
  • Height: 250px
  • Border Radius: 10px
  • Object Fit: Cover
  • Opacity & Transform: Used to enable a smooth hover scale effect
  • Hover Animation: Scales the image from 0 to 1 when hovered

Optional Motion Settings:

Luke enables the Squeeze effect for a more fluid cursor response.

Making the Image Dynamic with PHP:

Create a Custom PHP Snippet:

Using WPCodeBox (or any snippet manager), Luke writes a PHP function that returns the featured image URL for the current post within the loop:

function get_featured_image_url() {
  $url = get_the_post_thumbnail_url(get_the_ID());
  return $url ? $url : null;
}

Allow the Function in Bricks:

Due to Bricks’ security, a filter is added to allow the custom function to be echoed:

add_filter('bricks/code/echo_function_names', function($names) {
  $names[] = 'get_featured_image_url';
  return $names;
});

Insert the Dynamic Attribute:

Inside the attribute field for mp-cursor-media, Luke inserts the following:

echo get_featured_image_url();

Result:

Upon refreshing the page, each blog card dynamically pulls its featured image and displays it on hover, styled and animated based on Motion Page settings.

Conclusion

This tutorial demonstrates how to combine WordPress dynamic content with Motion Page’s new mouse follower features for immersive hover interactions. By displaying each blog post’s featured image as a floating media card beneath the cursor, designers can drastically improve engagement and visual storytelling — all without custom JavaScript.

Whether you’re building a blog, portfolio, or product catalog, this technique adds depth and professionalism with minimal setup. Thanks to Bricks Builder and Motion Page 2.2, advanced UX is now truly within reach for WordPress users.

Video transcript

View full
Hide

Hello guys, my name is Luke and welcome back to the channel. In today’s video, I will be showing you how to create something like this.

As you can see on this page, we have — as the title says — “Amazing Blog Posts.” We have three blog posts, and when I hover over each card, we get this effect. This is dynamic, and it’s actually pulling in the featured image of the blog post. If I click on one, you can see the featured image here. If I go back, we have Scramble Text, MorphSVG, and this Marquee Effect thumbnail. And here are the blog posts as you can see — Scramble Text, MorphSVG, and if I click into one, we can see the featured image right here. It’s being pulled in here.

This is possible with Motion Page, and I’m going to teach you how to do this right now.

Okay guys, so just to save on time, I’ve gone ahead and made three posts already — Marquee Effect, MorphSVG, and Scramble Text. These are just normal blog posts. If I open them up, you can see we just have some dummy text with featured images. There’s the third one.

So I have those, and I’ve also created a page — just on the homepage for now. Let me show you how this page has been set up in Bricks.

As you can see, nothing too special. Once again, this is more specific to Motion Page rather than design. It’s not too difficult to make these cards. We do have some dynamic data in here, like the post title, the excerpt, the author name, and this “5 months ago” text is also using a custom code block.

Here’s what it looks like on the front. As you can see, I can hover over these, and when I click them, they go to another template. But the main focus is this page right here.

What we want to happen is: when we hover over each card, we want to display the featured image on the cursor. We can now do that thanks to Motion Page, but there are just a few prerequisites we need to go through.

First of all, let me open Motion Page, and I’ll show you step-by-step how we’re going to achieve this. Before that, I’ll just show you how the card is made in Bricks.

If I expand this section, I’ve created an element called “Blog Loop.” This is basically a grid. In here, I have my card, which is a query loop. You can see I’ve linked the post to the post URL using Bricks dynamic data. In the query itself, I’ve set it up to show six posts per page. The type is post — just a basic query loop targeting the post type “post,” which is the default.

Let’s go and create a new timeline. You’ll notice the homepage loads by default. Let’s rename our timeline something easy. We are targeting the homepage. If you want to use the same effect on different pages, don’t forget to check this box — that just means the timeline will load on all pages across your website. But since I have this only on the homepage, I’ll leave that unchecked.

The trigger type wants to be “Mouse Follower,” because I want the image — the featured image — to display when I hover over the cards. The last important step is to select “Image/Video Cursor,” because this gives us an attribute to use.

As you can see, we have this yellow box that says “Add attribute mp-cursor-media to the element to display an image or video when hovering.”

So, mp-cursor-media — let’s go back to Bricks. If I hover over my card — my card is the query loop — I also have a Content element, which is kind of a parent to this design. It should work on the card as well, but I’m going to put it on the Content element.

In Attributes, I’m going to add an attribute. The name needs to be mp-cursor-media, with hyphens like this. As you can see, I’ve added the attribute. When I save it now — because this is a query loop — there should be three instances of this.

Let’s go back to Motion Page. I’m going to save the timeline and refresh. Now you can see it says “Elements found: 3,” so that means it’s working.

If I open up Unsplash and just get a random image URL — I’ll copy the image link — in Bricks Builder, I’ll paste that value here. It’s not going to do anything in Bricks Builder, but if I save this and go back to Motion Page and refresh, now you can see when I hover over each card, we get the URL that I just pasted.

Now obviously we want this to be dynamic. We don’t want a static URL. It needs to fetch the featured image of each blog post.

What I need to do is — in Bricks Builder — I need to put here a function, or Echo something, where we can fetch the featured image dynamically.

Before I do that, let’s give this image some styling first.

I’m going to set the width to 450 pixels to make it a little wider. I’ll match that in the media settings as well — set the height to 250. This one here — this is like the parent wrapper of the image — I’ll make those match. I’m going to add a border radius of something subtle, like 10 pixels.

I’ll keep the transform set to zero — I’ll show you why in a second — and set the opacity as well. I’ll set the border radius on the image itself to the same, and object-fit: cover is fine.

In the Hover tab, I’m going to set the scale to 1. So now we get this effect where it scales up when I hover over it — because by default, it’s set to scale 0, and the opacity is also taking effect.

So now we have this nice effect going on. When I move my cursor across the card, it’s kind of going smaller. That’s because of the squeeze. If I remove that, it becomes much more linear. I’m just going to refresh my window, because I was getting a smaller circle from before. Now it seems to be fixed. I’ll enable the squeeze again — I do like that effect.

Let me check the frontend because I’m seeing a small glitch. Okay — the frontend seems to be okay. Yeah, the design is looking good to me.

The only thing we need to do now is pull in the featured images dynamically.

I’m going to teach you how to do that using custom PHP. Feel free to follow along. I’m not sure if Bricks offers its own dynamic data — I’m sure it does — but I’m not aware of it, so I’ll create a PHP snippet to do what I need.

For this, I’ll be using WPCodeBox. However, you’re free to use whatever you like — you could pop the snippet into Bricks using a code block. There’s also Fluent Snippets, which is a free plugin that lets you add PHP snippets.

For this, I’ll use WPCodeBox — it’s just my personal preference.

I’m going to make a snippet called “Fetch Featured Image.” Now remember, this is going to go inside an attribute, and that means we’re already inside the query loop.

So I’ll create a new function here — get_featured_image_url().

Let’s do: [code]

We’ll check if the featured image exists. If not, we’ll return null: [code].

I’ll save the snippet and activate it.

Now, let’s grab this function and Echo it in our attribute.

Let’s go back to Bricks Builder.

Here, instead of using a hardcoded URL, we’ll do: [code].

Save this. Let’s take a look — refresh the homepage.

As you can see, we’re not getting anything returned. I’ll inspect the element. Okay, I can see the attribute name, but it looks like it’s returning null.

Now I do know there’s an image in there… Oh, I’ve just remembered that Bricks now requires us to sign all custom code. They offer a filter that we can add so our custom function is allowed to run.

Let’s do that at the top. Bricks has documentation on this — I’ll link it below.

We need to add: [code].

I’ll save this and hopefully that was the reason it wasn’t working.

Let’s go back to the front. Refresh.

Yes — so Bricks has that security feature. And now, as you can see, it’s returning the featured images when I hover over my blog cards.

Pretty nice — pretty cool effect, as you can see.

So there you have it, guys.

Thank you once again for watching, and we’ll be back very soon with another video.

Thank you very much. Cheers.

100 %