Without a doubt, WordPress is the major player in blog publishing platforms. Over the years, WordPress developers have produced a vast quantity of resources, which let users craft all kinds of unique blogs. In fact, there’s so much information on how to use WordPress, a user can get lost trying to set up customized effects and interactions. This tutorial outlines how to add hover effects to a WordPress post. This is a no-code approach that will save you the trouble of using any plugins.
Hover effects are animations that play whenever the cursor is placed over an object on the canvas, but without clicking that object. Typically, hover effects are implemented through code, but Hatch lets you create functional web widgets that you can later embed into your WordPress blog. If you like how the example above looks, try using the template for it here. Feel free to check it out in the editor by clicking the ‘use this template’ button at the top right.
How to create a ‘hover grow’ effect
First we’ll need an object to place the effect on. For this example we used a simple text object found on the left sidebar. Below, you can see how to add a text object to your canvas.
Once the text on the page you can move it or resize it at will. You can also change the font, size, color and other properties. Now let’s see how to add a hover effect to it!
Click on the text to select it, and look at ‘effects’ on the right sidebar, then click on ‘hover grow’.
That’s all you need to do, now click on ‘preview’ at the top of the editor to check out the page in action!
And that’s it! You can add the hover effect to any object you add to your Hatch canvas, including stickers, gifs, videos, drawings, and images. Of course, this is a very simple example of what you can do in Hatch with its many no-code tools. To learn how to craft more complex behaviors, you can browse our tutorials in the Hatch blog.
Now let’s see how to embed this standalone Hatch project into your WordPress blog.
Embed a Hatch page with hover effects into a WordPress post
Press ‘publish’ on the top right when you’ve finished editing your project. After setting a URL for your page and confirming the publication, you’ll find the ‘copy embed’ button right under the QR code. The embed code will be copied into your clipboard.
Now let’s switch over to the WordPress side of things. Open up your blog post and find the ‘custom HTML’ box shown below. Clicking on it will open up an input box, like the one shown below.
Now, paste the embed information you got from the Hatch site into the HTML input field, like so:
For the Hatch page to appear within your post, you’ll need to publish the WordPress post. But once your post or page is published, you’ll see your fully functional effects. You can move or resize the Hatch project however you like within your WordPress blog. Skip the complex plugin configurations and add interactivity to any blog post with Hatch.
There’s a lot you can accomplish in the Hatch editor with just a few clicks, so we invite you to get started here!