One of the easiest effect to create as we don't need to add any custom CSS, and it's only about the flex-grow CSS property.

The structure is very simple : The first Div is the container, the child Divs are the images (set as background images):

Step 1

In a Section (or not) , add a Div, then set his width to 100% and his Flex direction to row :

Step 2

Add a first child Div inside that container, and add a background image.
Then add the class .accordion-img

Set the height to whatever you want:

In Advanced / Layout, set the Flex Grow to 1:

And finally add a transition:

Click on the state button and select the pseudo-element :hover

Go to the layout settings and this time, change the flex-grow to 3 (or any other value, other than 0 or 1) :

You should now have a similar result (with your own background image):

Duplicate the child Div:

That's it, it's already working. Feel free to change the background for each Div, and add more effects (opacity, filter, transform...).

It's already responsive but it won't look great on mobile so it's better to make the accordion vertical.

Select the container, choose your breakpoint and change the flex direction to column :

Set a fixed height for that container:

And finally, select one of the Div (be sure to select the class and not the ID) and set the width to 100% and the height to auto: