When working in the studio, we love to find new and creative ways to leverage different tools and interactions. Sometimes, two different Ceros tools can be combined to create a truly unique and engaging experience. A great example of this is combining Object States with Image Masking. You can apply object states to images that have been masked to create some really unique effects on the platform. Before we take a look at some examples, be sure to check out our articles on Object States and Image Masking to learn how to leverage these tools individually.
Once you’re familiar with how to apply Object States and leverage Image Masking separately, we can combine these two tools. Let’s look at some examples:
Example 1:
In this example, a user is able to “zoom” in on a specific spot on an image based on which location they hover over in the Key. This was done by adding object states to the map image and the change target state interaction to each location text in the Key. So as the user hovers over “Soho” for example, the map will zoom into Soho. Using Object States, you can zoom and pan around masked images based on user interaction. To set this up:
- Mask the base image. We’ve masked the NYC image with a circle shape.
- Add new states to the base image. We’ve added 3 states in addition to the default, a new state to represent Chelsea, Soho, and the East Village. On each state, we’ve expanded the image and centered the location so that it would appear zoomed into that section of the map.
- On each text box, we’ve added a hover state to make the text bold on hover. We’ve also added an interaction of “On Hover – Change Target State” of the base image to the appropriate state, making sure “Lock State” is not selected, so it doesn’t stay permanently visible.
Now, when you hover over a text box in the key, it pans and zooms into the image within the mask.
Example 2:
In this example, we’ve masked various headshots within shapes to keep our “meet the team” gallery consistent and evenly spaced. Masking images in galleries like this can ensure that each image has the same dimensions. It also makes it easy to templatize the gallery. So as your team grows, you can duplicate one of the profile folders in the studio and use the Replace Image Tool to swap in a new teammates headshot (don’t forget by using the Replace Image Tool, any animations, interactivity, image edits, or object states applied to the original image will carry over to the swapped in image)! In this example, when a user hovers over the headshot, the image within the mask transforms to reflect the hover state we’ve applied with increased saturation. We’ve also added an interaction to show the caption of each image on hover. Let’s take a look at how to build this:
- Mask the base images. We’ve masked these images into circles and organized each masked group with a hover caption group.
- Add a hover state to each of the images. Since our images by default have -100% saturation, we’ve selected all 3 images and added a hover state that has a saturation of 0 to bring them back to full color on hover.
- Additionally, you can add an interaction to each mask group of “On Hover- Show Caption” so that the caption also shows when you hover over each mask group.
These are just two examples of how you can create unique effects with object states and masked images—but the possibilities are really endless! Feel free to play around with these tools, and as always, reach out if you have any questions.