In this tutorial you are going to learn how to create these expandable Elementor flex containers on hover.
This tutorial uses the new containers element, as they are perfect for this.
See the demo here:
Features:
- Uses the new flex containers
- CSS only design
- Add whatever element(s) you wish in the content that shows up after hovering
- Mobile ready (works on click there)
- Demo is included as a template file
- Elementor Pro is required as the template file uses the CTA element
Important note: You will need the feature "Container" to be enabled under Elementor > Experiments > Container. This uses the new Container element.
This tutorial is only recommended for users comfortable with modifying CSS. Due to the nature of the design, and all the different variations that could be made out of it, this particular tutorial comes with limited customization support & help. I will support in cases where you can't get it working. I might not help in making it look this or that way, or changing the animation.
Thank you for your understanding!
Credits: design idea from this codepen. I coded everything fresh, without any JavaScript.
Let's get started!
First, let's import the template file in your project
