How to change container background on text hover

This is the effect we are going to create

To start with, let's add a new container block first. Click the plus sign to add a new block

Search for "Container Maxi" and click on it to add a new container

Choose any row structure you want

Insert Text Maxi block and add the text "Background 1", for example

Duplicate it two times

Change the text for the duplicated items to "Background 2" and "Background 3"

Select the container and toggle height/width. Change the height to 800px for example

Toggle "Background / layers" and insert a background image layer

Add two more background image layers and choose different images

Now select the "Background 1" text and from the sidebar select the Advanced tab, then toggle Interaction Builder

Click to add a new interaction

For the block to affect, choose the container, because it's the container we want to change the background of

Choose to do it on text hover or click - up to you!

Now select to change the background

Set the background opacity to 100 of the first image, and 0 for the other two background image layers

Now select the "Background 2" text and also create an interaction. This time, set the second image to have opacity 100, and the first and the third one 0

Finally, select the "Background 3" text, and set background opacity 0 for the first and the second image layer, and 100 for the third layer