Elementor Flex Containers Expand on Hover

Elementor Flex Containers Expand on Hover

Just launched! Checkout the CSS Course for Elementor users.

Table of Contents

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:

Visit the demo page directly.

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.

 

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

Leave a Reply