Types
Fade
An element can disappear to reveal content below
![](/images/wireframe/square-image.png)
![](/images/avatar/large/ade.jpg)
![](/images/wireframe/square-image.png)
![](/images/avatar/large/ade.jpg)
Move
An element can move in a direction to reveal content
![](/images/wireframe/square-image.png)
![](/images/avatar/large/chris.jpg)
![](/images/wireframe/square-image.png)
![](/images/avatar/large/jenny.jpg)
![](/images/wireframe/square-image.png)
![](/images/avatar/large/justen.jpg)
![](/images/wireframe/square-image.png)
![](/images/avatar/large/nan.jpg)
Rotate
An element can rotate to reveal content below
![](/images/wireframe/square-image.png)
![](/images/avatar/large/stevie.jpg)
![](/images/wireframe/square-image.png)
![](/images/avatar/large/veronika.jpg)
Content
Visible Content
A reveal may contain content that is visible before interaction
![](/images/avatar/large/ade.jpg)
![](/images/wireframe/square-image.png)
Hidden Content
A reveal may contain content that is hidden before user interaction
![](/images/wireframe/square-image.png)
![](/images/avatar/large/ade.jpg)
States
Active
An active reveal displays its hidden content
![](/images/wireframe/square-image.png)
![](/images/avatar/large/nan.jpg)
Variations
Instant
An element can show its content without delay
![](/images/wireframe/square-image.png)
![](/images/avatar/large/chris.jpg)
States
Disabled
A disabled reveal will not animate when hovered
![](/images/wireframe/square-image.png)
![](/images/avatar/large/chris.jpg)