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)
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.
