Get My Free WordPress Beginner Toolkit

I’ll instantly send you my WordPress Beginner Toolkit (PDF) that comes along with all that you need to know as you start your WordPress web design  journey. Intermediate and advanced WordPress users have found it helpful too.

Elementor Image Rotor Cube Effect on Hover using Premium Addons

Elementor-Rotor-Cube-Image-on-hover-Effect

In this tutorial, I’ll show you how to add a rotor cube effect on hover your images in Elementor using the Premium Addons for Elementor.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Elementor Rotor Cube Effect on Hover

What You’ll Need to Create a Rotor Cube Effect on Hover 

To be able to add the rotor cube hover effect in your elementor website, you’ll need the pro version of the Premium Addons for Elementor, this is how you’ll have access to the iHover widget which will enable you to add hover effects to your images or text in Elementor.

With your Premium Addons for Elementor installed and activated, you’ll be able to see a list of widgets and features, find the iHover addon and enable it (make sure it’s green).

To Read: 15 Fun Elementor Features You Don’t Know Exist

Create a Page using Elementor

After enabling your iHover addon, go to Pages on your dashboard and add a new page then click the Edit with Elementor button.

Under Page Layout change to Elementor Canvas.

Add a new 2 column section, select the section, and in the Edit Section area on the left, set Minimum Height to 100 VH (01:03). Go to Style, under Background Type, select the Image option then click the Image option to choose an image from your Media Library (01:11)

From your Widgets area, drag a Heading widget to the first column (01:16)

Under Content give it a Title of ‘Rotor Cube Image Change on Hover’. Go to Style, give it Text Color of white, and for Typography, change the Font to Oswald, Weight of 900 pixels, and Size of 6.2 EM.

Select the section, under Style > Background Overlay, set color to black and Opacity to 0.67.

In the Widgets area search for the Premium iHover widget, drag it to your second column (01:54)

Click on the Choose Image option on the left, and choose an image from your media library (01:58)

Add an Image on Hover in Elementor

To add an image on hover, go down to Content, enable the Icon option, then on the Icon Type select Image, choose another image from your library. 

Set the Icon Size to 100%, then disable the Title option (02:35)

Back under Style > Container, make Hover Overlay Color transparent (02:54)

To Read: Stop WordPress Comments Spam: Add reCAPTCHA to WordPress Comment Form

Create the Elementor Rotor Cube Effect

Back in the Edit Premium iHover area, go to Content > Hover Effect, set it to Rotor Cube (03:09)

Rotor Cube Effect on Hover Gif

To Read: Free Elementor Remote Vertical Carousel Slider by Premium Addons

Rotor Cube Responsive Settings

Go to the Responsive Mode (03:18).

On the Tablet; 

Select the heading widget and under Style > Typography, set it to 4 EM. 

Select the section, go to Layout and change Minimum Height to 50 VH.

On the Mobile device;

Select the text and go to Style, under Typography, set the Size to 2.7 EM.

Go to Advanced, under Padding, unlink the values then give it 20 pixels on the Top.

Save and preview your changes.

Also Read: 3 Ways to Add MAILTO link in Elementor

In Closing

That’s how you create a rotor cube effect on your website.

For more tips and tutorials, subscribe to my newsletter and Youtube channel. And if you have any comments, suggestions, or questions, let me know in the section below.

Also Read. . .

Leave a Comment

Your email address will not be published.

Reccomended Tools

Get Web Hosting from the best as recommended by WordPress.org

Elementor is the WordPress most popular page builder with over 10 million active users

Featured In

Wordcamp_Logo
OneYoungWorld_white
New York Mag

Disclaimer: Some of the links on this website are affiliate links and I receive a commission if you make a purchase using them at NO extra cost to you. That way, I’m able to keep this website running

© 2022 GO Tech UG