Learn how to make a section with a background that changes when you hover over certain areas. Then check out these demos:
- interactive example, also known as a fiddle
- a preview so you can see the end result
Along the way you'll learn how to bind events to your Builder elements, how to set and read state, and how to add custom code.
Skill set: Basic
Area: UI plus a little code
Length: 17.5 minutes
- You'll need a Builder account.
- An evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.
To complete this project you will:
- Add a box with three images inside
- Position each image on top of the other
- Create three hover buttons to control which image is visible
- Set and get the state of the image area which indicates which image is currently visible
- Add a hover event to each button
- Add code to switch the image
- Add a CSS transition
Drag a Box block from the Insert tab onto the blue work area.
On the Style tab, click the down arrow next to Width and set the box to full page width. In the same manner, click the arrow next to Height and remove the height using Remove Style.
Once again in the Style tab give the box a min height of 500px.
Next, drag an image from the Insert tab into the box. Then with the image selected, on the Style tab under CSS Properties, click + New and add a new property for position. Assign the value to be Absolute. Then add an image of your choice using the Edit button.
Your first image appears on the page. Now duplicate the Image using the Duplicate option from the down arrow next to the Edit button.
Next, using the Edit button again, chose Change Photo, and select a photo of your choice. Notice that the new photo will be visible, but the first one is still there because they both have the same absolute position.
Duplicate the image once again the same way, and select a third image. That will now be the image visible to you.
Check the Layers tab; three images are listed inside your box.
While you're on the Layers tab, give each image a name. Here we'll use colors that represent the particular image: orange, blue, and purple because that is the order in which we placed the images. This screen shows the order if the images did not have position: absolute set in the Style tab.
Your images are all ready to change dynamically. Next you'll add buttons to control which image is shown.
To add the buttons that will change your image, first drag a Box block onto the work area like before. In the Style tab, you can set the Box to Full Page Width for this example, but it's not critical. Then drag three Buttons into the box from the Insert tab.
Once you set the width of each button on the Style tab, here's how the buttons will look. Note that they are stacked by default.
Change the label of each button to represent the color of the image you want to show when you hover over that button.
Next, style the buttons. On the Style tab you change the fill color for each button if you like, but it's not required.
Then, to align and position them, select the box that contains the buttons, and on the Style tab under Layout and Child Layout, click the Row button, indicated by the three blue dots.
Just under the rows setting is the Justify Content setting. Set it to Space Around if you prefer that look.
Tip: If you don't see Child Layout make sure you've selected an element that has at least one element inside it.
Now all your elements are in place. Next, you'll hook up the hover actions so the images can change.
To get the hover behavior, you need to set properties and actions on both the buttons and the images.
Begin by selecting one of the buttons. Then in the Data tab click + New Event. Select Mouse enter for the On field and click the Edit Action button.
Next, click the + Action button, then Custom code.
In the code window that opens:
Add the following line after the comments, or delete the comments:
state.activeImg = "orange";Here the activeImg is set to "orange" inside the state object. It's orange because we are setting it on the orange button which will handle the orange image. You'll perform the same steps for the other two buttons, using the corresponding color name you gave the images. This sets the state to the color you indicate when the user hovers. This color value will be passed to the show and hide code to control the images. We'll do that next.
Tip: You can expand the code window by clicking the full window icon in the upper right, as in the screen above.
Now you'll change the opacity of the images, so that the one you want to be visible is set to 100 and the others are set to 0. You'll do this using a data binding.
To get started, open the Layers tab and select one of the images. Note the color associated with it.
Also note the icons, which tell you what type of object it is and whether it has any actions or bindings. This is helpful in identifying your elements. You can also give each a name, as we did here using the colors.
Once you've selected one of the images, open the Data tab and click + New Binding.
For Get enter style.opacity and for from click the edit code button < >.
When the code window opens, add the following line of code, using the color associated with the image you are setting.
state.activeImg === 'purple' ? 100 : 0;The screenshot below shows that the value for style.opacity comes from the code you just added, which tests the value of activeImg inside the state object.
Another way two write the test for state.activeImg is
if (state.activeImg === "purple"){
return 100;
}
else {
return 0;
}Do the same for the other two images, selecting one in the Layers tab, opening the Data tab, and adding the code via the + New Binding link.
The Layers tab shows which elements you have added a binding to.
Here's how your page should look now:
You now know how to add behavior to elements in Builder. A refinement you can make to this project is to create smooth transitions between the changing images. We'll do that next.
To add a transition, select an image in the Layers tab. Open the Style tab, and in the CSS Properties section click + New.
Select Transition from the dropdown list, and for the value, enter opacity ease-in-out 1s.
Repeat this step for the remaining two images. You can adjust the duration of the transition. Here's we used 1 second so the transition is obvious.
Now the images transition smoothly between each other. Here's how it looks:
The button area can be placed inside the image area by adding a Section block inside the Images box and moving the button box into it.
To do so, in the Insert tab, grab a Section block and go to the Layers tab and paste the Section block right below your images.
Check all you images on the Style tab to ensure that each is set to Overflow Hidden under CSS properties.
In the Layers tab, drag the Box containing your buttons into the new Section.
Here's how your Layers should look:
Adjust the width and positioning of the Section and the buttons box until you achieve a look you like.
Here's how the buttons look on top of the image.
Now that you now know how to use data bindings and events, you can create your own interactive designs.
To learn more of what you can do in Builder, check out the other tutorials in the Video Library or build out a page with more sections and techniques in the Getting Started.
