3 Seamless Transform Hover Effects That You Can Apply to Your Images with Divi

Last Updated on September 18, 2022 by 4 Comments

3 Seamless Transform Hover Effects That You Can Apply to Your Images with Divi
Blog / Divi Resources / 3 Seamless Transform Hover Effects That You Can Apply to Your Images with Divi
Play Button

Looking for a cool way to showcase images on your next Divi website? Keep on reading, because in this post, we’re going to handle 3 image transform hover effects that will help elevate the overall look and feel of your page. You’ll be able to follow the A to Z recreation process of three different examples and even download them for immediate use. The main purpose of this tutorial is inspiring you to combine Divi’s new transform options with the already-existing options out there to create beautiful web design.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome of all three examples across different screen sizes.

Desktop

Example #1

transform hover effects

Example #2

transform hover effects

Example #3

transform hover effects

Mobile

Example #1

transform hover effects

Example #2

transform hover effects

Example #3

transform hover effects

Download The Image Transform Hover Effects for FREE

Subscribe To Our Youtube Channel

To lay your hands on the free image transform hover effects, you will first need to download them using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

General Steps

Add New Section

Spacing

Before we recreate each one of the examples individually, we’ll go through some general steps. Add a new regular section to your page using the following margin and padding values:

  • Top Margin: 200px
  • Bottom Margin: 200px
  • Top Padding: 0px
  • Bottom Padding: 0px

transform hover effects

Add New Row

Column Structure

Continue by adding a new row using the following column structure:

transform hover effects

Column 2 Background Color

Without adding any modules yet, open the row settings and add a background color to the second column.

  • Column 2 Background Color: #efefef

transform hover effects

Sizing

Go to the sizing settings next and allow the row to take up the entire width of the screen.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes
  • Width: 100%
  • Max Width: 100%

transform hover effects

Spacing

Add the following custom padding values next:

  • Top Padding: 0px
  • Bottom Padding: 0px
  • Column 2 Top Padding: 10vw
  • Column 2 Bottom Padding: 10vw
  • Column 2 Left Padding: 5vw
  • Column 2 Right Padding: 5vw

transform hover effects

Add Text Module #1 to Column 2

Add H2 Content

Time to start adding the various modules to column 2, starting with a Text Module. Enter some H2 content of your choice.

transform hover effects

H2 Text Settings

Move on to the design tab and modify the H2 text settings.

  • Heading 2 Font: Times New Roman
  • Heading 2 Font Weight: Bold
  • Heading 2 Text Color: #0f47ff
  • Heading 2 Text Size: 3.5vw

transform hover effects

Add Divider Module to Column 2

Visibility

The next module we need in the second column is a Divider Module. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

transform hover effects

Color

Then, go to the design tab and change the divider color.

  • Color: #ff961e

transform hover effects

Sizing

Modify the sizing values as well.

  • Divider Weight: 1px
  • Width: 20%
  • Module Alignment: Left
  • Height: 0px

transform hover effects

Spacing

And create some space for the module using the following top and bottom margin values:

  • Top Margin: 1vw
  • Bottom Margin: 1vw

transform hover effects

Add Text Module #2 to Column 2

Add Content

On to the next module, which is another Text Module. Enter some paragraph content of your choice.

transform hover effects

Text Settings

Move on to the design tab and change the text settings.

  • Text Font: Open Sans
  • Text Size: 0.7vw (Desktop), 1.7vw (Tablet), 2.5vw (Phone)
  • Text Line Height: 1.5vw (Desktop), 2.5vw (Tablet), 3.5vw (Phone)
  • Text Orientation: Justify

transform hover effects

Sizing

Modify the sizing settings as well.

  • Width: 61% (Desktop), 80% (Tablet & Phone)

transform hover effects

Spacing

And add some custom top and bottom margin.

  • Top Margin: 2vw
  • Bottom Margin: 2vw

transform hover effects

Add Text Module #3 to Column 3

Add Content

On to the next and last module we need in the second column, which is another Text Module. We’ll use this module as a button by adding some paragraph content.

transform hover effects

Add Link

Continue by adding a link to the CTA.

transform hover effects

Text Settings

Move on to the design tab and change the text settings accordingly:

  • Text Font: Times New Roman
  • Text Color: #ff961e
  • Text Size: 1.5vw (Desktop), 2.5vw (Tablet), 3.5vw (Phone)

transform hover effects

Sizing

Change the width of the module in the sizing settings as well.

  • Width: 48%

transform hover effects

Spacing

Then, go to the spacing settings and add some custom padding.

  • Top Padding: 1vw
  • Bottom Padding: 1vw

transform hover effects

Border

Finish the Text Module by adding a bottom border with the following settings:

  • Bottom Border Width: 1px
  • Bottom Border Color: #0f47ff

transform hover effects

Clone Section Twice

Once you’re done customizing the section and all of the elements in it, you can go ahead and clone it twice. We’ll use each one of the sections on our page to recreate the three examples that were shared at the beginning of this post.

transform hover effects

Recreate Example #1

transform hover effects

Add Image Module to Column 1

Leave Image Box Empty

Let’s start with the first example! Add a new Image Module to the first column and make sure you leave the image box empty.

transform hover effects

Default Background Color

Change the background color of the Image Module:

  • Background Color: #0f47ff

transform hover effects

Hover Background Color

Modify the background color on hover.

  • Background Color: rgba(255,150,30,0.65)

transform hover effects

Background Image

Instead of uploading an image, we’ll add one to the background instead, accompanied by the following settings:

  • Background Image Size: Cover
  • Background Image Position: Center
  • Background Image Repeat: No Repeat
  • Background Image Blend: Soft Light

transform hover effects

Spacing

Move on to the spacing settings of the module and add some custom padding values:

  • Show Space Below The Image: No
  • Top Padding: 22vw
  • Bottom Padding: 22vw

transform hover effects

Default Translate Rotate

We’ll also rotate the image on hover. Make sure the image appears in its original state before hovering by adding ‘0deg’ to the right option.

  • Right: 0deg

transform hover effects

Hover Translate Rotate

Change this value on hover:

  • Right: 180deg

transform hover effects

Transitions

To create an immediate effect, we’ll remove the transition duration:

  • Transition Duration: 0ms

transform hover effects

Recreate Example #2

transform hover effects

Add Image Module to Column 1

Leave Image Box Empty

On to the second example! Again, make sure you leave the image box empty.

transform hover effects

Default Background Color

Go to the background settings and add the following (completely transparent) background color:

  • Background Color: rgba(255,255,255,0)

transform hover effects

Hover Background Color

Modify this color on hover:

  • Background Color: rgba(0,0,0,0.65)

transform hover effects

Background Image

We’re, again, using a background image instead of uploading one to the module itself. Combine the background image with the following settings:

  • Background Image Size: Cover
  • Background Image Position: Center
  • Background Image Repeat: No Repeat
  • Background Image Blend: Soft Light

transform hover effects

Spacing

Then, go to the spacing settings and modify the top and bottom padding:

  • Show Space Below The Image: No
  • Top Padding: 22vw
  • Bottom Padding: 22vw

transform hover effects

Default Transform Scale

Make sure the default transform scale values remain ‘100%’.

  • Right: 100%
  • Bottom: 100%

transform hover effects

Hover Transform Scale

And change these values on hover to create a scaling effect.

  • Right: 120%
  • Bottom: 120%

transform hover effects

Default Transform Translate

By default, we’re keeping ‘0px’ for the bottom option in the transform translate settings.

  • Bottom: 0px

transform hover effects

Hover Transform Translate

Modify this value on hover to reposition the element.

  • Bottom: 9vw

transform hover effects

Transitions

We’re also creating a slightly faster transition by changing the transition duration in the advanced tab:

  • Transition Duration: 200ms

transform hover effects

Recreate Example #3

transform hover effects

Change Column Structure

On to the next and last example! Start by modifying the column structure of the row.

transform hover effects

Add Image Module to Column 1

Upload 1:1 Image

Then, add an Image Module to the first column. In contrast to the first two examples, we’re going to upload an image with a 1:1 ratio (same width and height).

transform hover effects

Sizing

Move on to the design tab and force the image to be fullwidth in the sizing settings.

  • Force Fullwidth: Yes

transform hover effects

Spacing

Remove the space below the image in the spacing settings next.

  • Show Space Below The Image: No

transform hover effects

Default Border

Then, go to the border settings and add ‘500vw’ to each one of the corners. We’re making sure this value is high enough to cover all screen sizes.

transform hover effects

Hover Border

Remove the rounded corners you’ve added on hover.

transform hover effects

Default Filters

Then, go to the filters settings and make sure these default values are added:

  • Saturation: 100%
  • Brightness: 46%
  • Opacity: 3%

transform hover effects

Hover Filters

Enable the hover option on each one of the modified settings and use the following values:

  • Saturation: 300%
  • Brightness: 46%
  • Opacity: 100%

transform hover effects

Default Transform Scale

Then, go to the transform options and modify the default transform scale options:

  • Right: 68%
  • Bottom: 68%

transform hover effects

Hover Transform Scale

Change these values on hover.

  • Right: 130%
  • Bottom: 130%

transform hover effects

Default Transform Translate

Move on to the transform translate values and make sure the default transform translate values remain the same:

  • Right: 0px
  • Bottom: 0px

transform hover effects

Hover Transform Translate

Modify the values on hover.

  • Right: 1vw
  • Bottom: 8vw

transform hover effects

Transitions

Last but not least, increase the transition duration in the advanced tab to create a smooth transition and you’re done!

  • Transition Duration: 600ms

transform hover effects

Preview

Now that we’ve gone through all steps, let’s take a final look at the outcome across different screen sizes.

Desktop

Example #1

transform hover effects

Example #2

transform hover effects

Example #3

transform hover effects

Mobile

Example #1

transform hover effects

Example #2

transform hover effects

Example #3

transform hover effects

Final Thoughts

In this post, we’ve shown you how to get creative with the Image Module and Divi’s hover and transform options. The effects we’ve recreated are just a few of the many beautiful possibilities out there. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Augmented Reality Layout Pack for Divi

Get a Free Augmented Reality Layout Pack for Divi

Posted on March 25, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Augmented Reality Layout Pack that’ll help you get your next Augmented...

View Full Post
Download a Free Webinar Theme Builder Pack for Divi

Download a Free Webinar Theme Builder Pack for Divi

Posted on March 22, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Webinar Theme Builder...

View Full Post
Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Updated on March 21, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack that’ll help you get your next Modeling...

View Full Post

4 Comments

  1. I tried uploading the json file and it said the “file should not be imported in this context” What gives?

  2. Odd that there is no hover option directly on Image? Only background image.
    With the big UI consistency update I would have thought that was be included.
    Any reason for it not being there?

  3. A finest feature which I haven’t seen in my life till now. Definitely going to use this hover effect as it looked so amazing the photographs in your post. Divi keeps amazing me with its innovative & endless features of themes.

    • Good to hear, Raza!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today