Exploding elements on hover

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Exploding elements on hover

Create a hover effect by scaling along the z-axis for an explosive, attention-grabbing transition.


In this lesson: 

  1. Set a child perspective
  2. Move the z-position of child elements
  3. Scale along the z-axis
  4. Smooth everything out with a transition


Set a child perspective

In the Style panel, set the Children Perspective (e.g., to 1000 pixels).


Move the z-position of child elements

  1. Click the element you’re working with
  2. In the Style panel, click the plus sign next to Transforms and adjust the z-position


Scale along the z-axis

  1. Click the element you’re working with
  2. In the Style panel, click the plus sign next to Transforms 
  3. Click Scale and adjust the z-axis (if you go too low, the element will disappear)
  4. Click the dropdown menu at the top next to States
  5. Click Hover
  6. Under Transforms, click scale and return the element to its original value (e.g., 1)


Smooth everything out with a transition

  1. In the Style panel, click the clock icon under Transitions & Transforms
  2. Choose Transform from the dropdown menu
  3. Set a duration that’s longer than 200 MS 


Check your work in preview. 


Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form