Because pricing tables can sometimes be a bit of a yawn, I’m going to demonstrate how to make a column zoom forward as you mouse over it. And like many of the other tutorials on this site, it just takes a little CSS to make this magic happen.
The Example
In this example you’ll see that the column your mouse hovers over will zoom forward slightly.
Pretium Elit Fermentum
Small- 1 Proin Iaculis
- 1 Blandit Velit
- Suspendisse Blandit
- Etiam Est Velit
- 2 Curabitur Quis
- Rhoncus Suscipit
- 25 Class Aptent Taciti
- Magna Volutpat Sed
- 3 Justo Sed Mi Porttitor
- Dapibus Sodales
- Pellentesque Ex
Pellentesque Imperdiet
Medium- 2 Proin Iaculis
- 1 Blandit Velit
- Suspendisse Blandit
- Etiam Est Velit
- 3 Curabitur Quis
- Rhoncus Suscipit
- 50 Class Aptent Taciti
- Magna Volutpat Sed
- 5 Justo Sed Mi Porttitor
- Dapibus Sodales
- Pellentesque Ex
Elementum Condimentum
Large- 3 Proin Iaculis
- 2 Blandit Velit
- Suspendisse Blandit
- Etiam Est Velit
- 6 Curabitur Quis
- Rhoncus Suscipit
- 125 Class Aptent Taciti
- Magna Volutpat Sed
- 9 Justo Sed Mi Porttitor
- Dapibus Sodales
- Pellentesque Ex
The CSS
At the heart of this effect is the transform property. It can accept a number of values which can rotate, scale, move, skew, etc. the element you’re targeting. In this tutorial we’re using scale. The z-index property makes sure the column moves above the other columns and not behind them and transition-duration controls the speed at which it moves forward.
Copy the CSS and place it either in the Custom CSS field of the Settings module of the page you’re working on or stick it where you’d normally put it (child theme style.css file or the Divi Theme Options Custom CSS field).
The End
And there you have it a cool little effect to use on your Divi Pricing Tables module. While we’re on the selling theme, something that might be of interest to you is the tutorial “Switch Main Product Image When Clicking On A Variation Thumbnail Using Divi Code Modules” which might come in handy for displaying products on the same page.
Photo by JC Dela Cuesta on Unsplash
Divi Notes started as a way to document my own WordPress and Divi web design/development journey and, to my delight, has grown to become a helpful resource to many other Divi users out there. If you’ve found Divi Notes to be useful in your journey, I’d appreciate it if you would consider supporting me using the form below.