Elementor Image Rotor Cube Effect on Hover using Premium Addons

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

fWXjMY5QyouCfR

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)

qZGaE5tfyhjG8UIxaosrts6AOeFjwcdCK756ykKB RhRZ4vmE5TxHyzVJWvBHi86BXMy6yBh3jyCEjrQgszv9EEquT39cRLq6X3qVn VzMkl0Qm9JGMHp4RbkOv0IJtqJ5pJyCqr

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

Hd4 j1zQdAA5nLcWuNcPRn7TY9ZNKpLtYm RgcnoZm9Cg4o1kZLsToMR3dG LdvbvHIOq2beRWSvLnIyXR

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)

pE3TarsBQ4SiQNTe LYC5HPEK bGUiWyqnXLUs5LxuSz39a5XNTKsw0NBeQs9jdDiwUogC5JoNtJfKq0ONmZDsiFhBD CLtkWP2cvaM9J23 JaDOOc BS73SWYC EBvEsXKQoqB

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)

Ru ADWesGy0UtrZQ5WbHcTWClASwmp o9PXJ6xOSysOAGcVVpxBjymDijqi0mk2a6fidY2Ank C9ZSNvF7IC2PcGQrw2HOHRBvBFo

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

eWZiavcUVKJhdPEPFp1UJN9tM 1l5Qgag4C8GXUX5cGUgx4qpzbaLxYCq

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.

eQJC82vStTj59fax yMIeNg VoCZfP1w9y60gdzaJjPyx8rUeKZR5TagdLLSb M3s2hG0A6hOet y3Cf wLlRq1 zwoP0rw LFAQhIb00SGhzjPVq wfzButNW T2D LLErUTdQ

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

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

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