Create Amazingly Cool Dynamic Exanding Elementor Accordians In Minutes

Adding Our CSS Styles

Now on to the fun part. 

Inside our Global Site Settings > Custom CSS we will add all of our styles:

*Note: I like to keep all of my CSS in one location, I will wrap each pages section with comments so I know what I’m looking at. 

The first thing I will do is  wrap the entire section so that the effects will not work on mobile since there is no hover. 

Then we’re going to set the contents of each of the .puppy-box columns to hidden by setting an opacity of 0.

We want the text and button to fade in when you hover over it so we are going to set a transition on the opactity.  The transition allows for the smooth change as opposed to a hard switch. 

we’re telling it we want to change the opacity, we want the change to take .3 seconds, and we want the change to ease in, and we want to delay the start of the change for .2 seconds.  Then we will tell it what we want the opacity to change to,  in this case, it’s fully visible, or 1. 

The next section is going to deal with the size of the boxes,  We are using FlexBox with Elementor to modify the size of the columns.  

We’re going to use the same method as previously used. 

We will tell the CSS we want to transition the flex property, and we want to take .3 seconds to do it, and we want it to ease. 

We are going to change the flex property from 1 to 3. 

For the next part, we are going to establish a max height for our sections of 300px. Then we are going to transition that height with the same .3 second ease. 

In our Hover state we will have our sections scale up to 400px tall. 

For the last part, since we don’t have a hover for mobile, we’re just going to style the 6 sections with the background already darkened. 

There are a lot of other ways you could handle this, but I’m just going to keep this one simple since this was really all about the desktop effects. 

/*—– exploding puppies —- */
@media(min-width:768px){
.puppy-box .elementor-widget-wrap{
opacity:0;
}
.puppy-box:hover .elementor-widget-wrap{
transition: opacity .3s ease .2s;
opacity:1;
}

.puppy-box{
overflow:hidden;
flex:1;
transition:flex .3s ease;
}
.puppy-box:hover{
flex:4;
}
.main-puppy{
max-height:300px;
transition:max-height .3s ease;
}

.main-puppy:hover{
max-height:400px;
}
}
@media(max-width:768px){
.puppy-box .elementor-widget-wrap{
opacity:1;
}
.puppy-box .elementor-background-overlay{
opacity:.2!important;
}
}

/*—- end exploding puppies —– */