Morph Image Animations in Thrive Architect (on Hover!)

Transforming, or morphing, the shape of images is not a default feature in Thrive Architect. However, by copying and pasting only a few lines of CSS, you can create very easy image shapes and even some fancy looking image morphing hover animations.

Creating a Clip Path for your Image

To start off this tutorial, I want to introduce you to the Clip Path Maker tool. Using this tool, you can create a clip path for any image and nearly any shape. Think of a clip path as a path for the CSS to follow as it cuts out your image. 

We first want to create a clip path for the final image we'll morph our original image into. This helps us identify how many nodes we will need in our original image. 

Now copy the clip-path and paste it into notepad, or somewhere safe and place it inside the following CSS like this:

If my clip-path I copied was this:

clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

Then I want it to look like this:

.morph img{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path 0.25s ease;
}

.morph:hover img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Next, drag the nodes from your final shape until they resemble your original image. In almost every case, this will simply mean dragging all of the nodes into the corners and sides until they are all in a corner and your image looks normal.

In my example above, I took the two end points on each of the legs of the X and moved them into the corners. THen I took the inner corners of the X and moved those to the sides until my image looked right.

RECAPPING THE IMPORTANT RULE: Your original shape must have the same number of "nodes" (colored circles in CSS Clip-Path Maker) as your morphed shape. Start with the morphed shape so that you know how many nodes you will need, then drag the nodes around until they form your original shape. In some instances, like a triangle, you may need to start with a square and make a triangle so that you have four nodes to work with.

Adding HTML Attributes to Our Container Element

Now we need to go into Thrive Architect and add the image we want to use inside of a content box.

Click on the content box elements and in Thrive Architect and type "morph" (without quotes) into the class field under HTML Attributes (bottom of the left side bar).

Adding Custom CSS to Thrive Architect Page

Now copy the CSS I had you set aside previous. In Thrive Architect, in the right side bar, click the gear for settings > Advanced Settings > Custom CSS > Paste in the CSS you copied. Press the check mark in the upper right.

That's it! Now, when you hover over the content box where your image resides, your image will morph into the shape you selected. When you stop hovering inside the box, your image will morph back into the original image.

Creating a Static Clip-Path Without Morphing

If you want to just have the image stay in the shape of the clip path, all you need to do is replace what you put into the class field. Instead of "morph" you put "shape" (no quotes), and use this CSS:

.shape img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

How awesome is that?! 

Now that you understand the premise for how to apply CSS morphing and shaping to your images, feel free to experiment with where you put the HTML Attribute Class. You'll discover all sorts of ways to morph images and shapes to help you create unique, dynamic looking websites.

>