---
layout      : 'default'
css         : 'reveal'

title       : 'Reveal'
description : 'A reveal is an element that shows different content below it when hovered'
type        : 'UI Module'
---

<%- @partial('header') %>

<div class="main container">

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Types</a>
      <a class="item">Variations</a>
      <a class="item">States</a>
    </div>
  </div>

  <h2 class="ui dividing header">Types</h2>

  <div class="example">
    <h4 class="ui header">Reveal</h4>
    <p>A standard reveal has no special formatting</p>
    <div class="ui ignored red message">
      A reveal will take no action unless a type of reveal is specified.
    </div>
    <div class="ui circular reveal">
      <img class="visible content" src="/images/demo/stickfigure.jpg">
      <img class="hidden content" src="/images/demo/photo2.jpg">
    </div>
  </div>
  <div class="example">
    <h4 class="ui header">Fade</h4>
    <p>An element can disappear to reveal content below</p>
    <div class="ui fade reveal">
      <img class="visible content" src="/images/demo/invention.jpg">
      <img class="hidden content" src="/images/demo/title.png">
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Move</h4>
    <p>An element can move in a direction to reveal content</p>
    <div class="ui move reveal">
      <img class="visible content" src="/images/demo/invention.jpg">
      <img class="hidden content" src="/images/demo/title.png">
    </div>
  </div>
  <div class="another example">
    <div class="ui move right reveal">
      <img class="visible content" src="/images/demo/invention.jpg">
      <img class="hidden content" src="/images/demo/title.png">
    </div>
  </div>

  <div class="another example">
    <div class="ui move up reveal">
      <img class="visible content" src="/images/demo/invention.jpg">
      <img class="hidden content" src="/images/demo/title.png">
    </div>
  </div>

  <div class="another example">
    <div class="ui move down reveal">
      <img class="visible content" src="/images/demo/invention.jpg">
      <img class="hidden content" src="/images/demo/title.png">
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Rotate</h4>
    <p>An element can rotate to reveal content below</p>
    <div class="ui circular rotate reveal image">
      <img class="visible content" src="/images/demo/stickfigure.jpg">
      <img class="hidden content" src="/images/demo/photo2.jpg">
    </div>
  </div>
  <div class="another example">
    <div class="ui circular rotate left reveal image">
      <img class="visible content" src="/images/demo/stickfigure.jpg">
      <img class="hidden content" src="/images/demo/photo2.jpg">
    </div>
  </div>

  <h2 class="ui dividing header">Variations</h2>

  <div class="example">
    <h4 class="ui header">Masked</h4>
    <p>An element can mask its content so that an element does not escape its parent</p>
    <div class="ui masked move reveal">
      <img class="visible content" src="/images/demo/invention.jpg">
      <img class="hidden content" src="/images/demo/title.png">
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Instant</h4>
    <p>An element can show its content without delay</p>
    <div class="ui instant masked move reveal">
      <img class="visible content" src="/images/demo/invention.jpg">
      <img class="hidden content" src="/images/demo/title.png">
    </div>
  </div>


  <h2 class="ui dividing header">States</h2>

  <div class="example">
    <h4 class="ui header">Disabled</h4>
    <p>A disabled reveal will not animate when hovered</p>
    <div class="ui circular disabled move reveal">
      <img class="visible content" src="/images/demo/stickfigure.jpg">
      <img class="hidden content" src="/images/demo/photo2.jpg">
    </div>
  </div>



</div>