Creating a Grayscale to Color Gallery with the Divi Gallery Module

Last Updated on September 22, 2022 by 1 Comment

Creating a Grayscale to Color Gallery with the Divi Gallery Module
Blog / Divi Resources / Creating a Grayscale to Color Gallery with the Divi Gallery Module

Divi’s modules are incredibly flexible in their styling. Incorporating hover effects alongside more traditional design elements can elevate your pages from good to great—or from great to amazing. Today, we are going to walk you through taking a Divi gallery module that starts in grayscale and turns to color on hover (or touch on mobile). Let’s get started!

Preview

To give you an idea of what we’re going to be working on today, you can check out the videos below to see the Divi Gallery Module starting in grayscale but showing a color image when the mouse hovers over it. On mobile, a simple touch as the user scrolls will initiate the change.

Desktop

Mobile

Create/Navigate to the Page with Divi Gallery Module

It may go without saying, but you will need to either create the new page or go to your existing page that you want to edit. Next, you will want to make sure that you use the Visual Builder.

make divi page

If you are creating a new page or significantly altering an exiting one, you may want to load in one of our pre-made layouts. For this particular tutorial, we are going to use the pottery studio layout pack. Specifically, the gallery page for obvious reasons.

Replace Custom Gallery with the Gallery Module

As we begin, we will want to replace the custom gallery used in the layout pack with the Divi Gallery Module. You need to go into the second section and remove all the interior rows. Doing so will also delete any contained modules. Deleting the rows entirely here is just more efficient than deleting the individual modules.

remove rows

Add A New Row

Now, you will just add a new row to start our fresh, new design.

row

Select Row Structure

For this tutorial, we are going to use the 2-column layout, but you can choose whatever works best for your site.

add columns

Add Gallery Modules

Next, you will want to add the Divi Gallery Modules to however many columns that you have included. (Or as many as you want them in.)

divi column gallery modules

Upload Images and Style Gallery

Since we’re using a new gallery, we will want to not only add the images that we want to display, but also style the gallery to match the page we’re working on.

hover color

Adjust the Text Styles

Because the pottery studio gallery is a dark-themed layout pack, we want to go to the Text settings under the Design tab to change the Text Color to light so users can read it.

add text color

Changing the Font

We adjust the default font for the titles of the images to be Poppins over the default and set them to bold.

bold

Apply the Grayscale to Color Effect

Now it’s time to get into the nuts and bolts of the effect itself. It only takes a few simple steps to create the grayscale-to-color hover effect.

Change the Overlay Icon and Background Color

Next up, you will want to navigate to the Overlay section of the Design tab. Adjust the Overlay Icon Color to something that matches the design of your page. We used #fdb467 for this example. It is used as a color in the rest of the pottery studio layout pack.

overlay settings

You then want to adjust the Overlay Background Color to be Transparent.

Image Settings

You will now go to the Image Settings section in the Design tab, a bit further down.

image settings

Change Default Saturation

Inside the image settings, find the saturation slider. You will adjust this down to 0%. Doing so will immediately render your images in that gallery in  grayscale.

saturation to 0

Apply Saturation to Hover

Hover over the Image Saturation slider and find the icon that looks like an arrow. Click it, and you can now adjust the specific settings for on-hover effects. For this example, we have set it back to 100% saturation because that is the normal photo. However, if you want the image to hover even more vibrantly, you can adjust the saturation even higher and adjust any of the other image settings.

As long as the base saturation is 0, and the hover saturation is higher, the transition will work to the intensity you choose.

image saturation

Save your module settings and page, and your grayscale-to-color hover effects should be working. You might have to leave the Divi builder to test the hover effects because of element selection. So if you don’t see the hover preview change, don’t fret. Exit the builder, and it will work.

Additionally, if you want a color image to become grayscale, simply reverse the steps here. Set the normal saturation to 100%, but lower the hover saturation too 0%. That will drain the color whenever someone clicks or taps the gallery image.

Effect Preview

desktop preview

The transition can be seen between 1 and 2, while 3 is an example of the default gallery hover overlay and design settings. You can see the effect in motion on desktop and mobile below.

Mobile

Conclusion

Creating a grayscale-to-color effect using Divi’s hover options is quick and easy. With just a few clicks and slider adjustment, you can take our default styling and turn it into something that matches your site perfectly. Image galleries appear on nearly every site, so many users can become blind to them unless they’re specifically seeking out that content. By using this effect, you will have a microinteraction that draws their eyes to your gallery and keeps them engaged with your site.

What do you think? Let us know in the comments!

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

1 Comment

  1. Hi. I’m looking at this post on mobile and there’s no video to show the preview?

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today