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
This is a premium tutorial. Purchase access to unlock the full tutorial and download the template.
2 Responses
Hello.
I am customizing this template, and I want to change the font styling of the titles not being hovered, white the other one is. But it doesn't assume the font property. Is there a reason for this?
I would appreciate some help.
Thank you so much.
Greetings Filipa,
Could you share your URL with me? Along with what you would like which font to look like.
Thanks!