In the last major update, we added a powerful Filterable Grid module. It allows you to create advanced grid layouts with custom posts. Since then, we have also improved the Before & After Slider module by adding a bunch of new settings, with micro animation options included. These improvements significantly improve the user experience using this module.

In this release, we are adding another – 44th 🥳 module to the Divi Pixel collection! The Hover Gallery is a unique and creative tool that will allow the creation of interactive and engaging sections. If you want to learn more, keep reading.

Introducing Hover Gallery for Divi

Interactive websites are easier to attract the attention of visitors. It is a great idea to allow users to discover the page by interacting with it. And Divi Pixel modules do just that.

There are several techniques in the web design industry to engage users. One can be achieved by enabling mouse hover/click events, so something happens after the user mouseovers or clicks on specific elements. Of course, we should never overdo it by adding motion to the website. Depending on the site’s purpose, this technique should be used more or less.

The Hover Gallery is another creative module in Divi Pixel arsenal. It allows you to build a grid of content boxes where each grid item can have the main image, icon, title, description, and button. The main pictures are revealed after the user hovers or clicks the single grid box.

Advanced customization settings

The Hover Gallery module is highly customizable. After adding content to each grid item, you can customize each element using the advanced modules settings. This module has also been developed so you can use different styles for each content box separately, as the customization options are available in the parent and child modules.

Each grid item has settings for adding icons or images, titles, descriptions, and buttons. You can change the grid item appearance for the default and active states (when users mouseover or click the item).

After adding content, you can also customize the grid, change column number and spacing, and set the max width of the grid and position. All of these options are responsive, so they can also be adapted for mobile devices.

Global vs. Child item settings

There are two ways to adapt this module to your needs. You can use global settings to use the same styles for each grid item. And if you want to style each card individually, child module settings should be used.

Global Settings

Global settings are available in the parent module and will apply to each grid item element if you don’t enable custom styles in the child modules. If you want all cards to be the same, then using a global setting is the way to go. Style the default and active item elements separately to create a nice mouseover effect.

Child module Settings

All styles found in the parent module are also available in the child modules. This means that you can customize each grid item individually. These options will be helpful if you want each card to have different colors. It’s a good practice to create and customize 1 item, and then duplicate it and change only images and colors.

Grid settings and animation effects

The Hover Gallery module gives you complete control over the grid layout. You can customize the number of columns and spacing and set grid position and width. Seven animation effects are available that will make your Hover Gallery spectacular. There is also an option to enable the Autoplay mode, so your grid items will switch automatically after the defined delay.

What’s next?

Our team is not slowing down. Our work day is constantly testing new features and improving our modules to work flawlessly, and use is simple and pleasant. In upcoming releases, we will publish new modules. In the meantime, we will publish new Layout Packs for Sushi Bar, Cleaning, and Winery. For more information about new modules, please check our Product Roadmap.

That’s all for today. In the next major release, we will publish another new module, so stay tuned! We’d love to hear your feedback. Share your opinion in the comments below 🙂 If you would like to connect with other users that are using the Divi Pixel plugin, join the Divi Pixel Community today! You are invited!