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

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 Divi Daily email list 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.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

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.

The post 3 Seamless Transform Hover Effects That You Can Apply to Your Images with Divi appeared first on Elegant Themes Blog.