有两块内容，你可以先让一块内容显示，一个块内容隐藏，鼠标放到这个显示的内容的时候，会让它隐藏起来，然后再把隐藏的内容显示出来，这就是 Semantic UI 的 Reveal 元素的功能 ..

先把这两块内容放到一个容器里 .. 比如一个 div 标签 … 上面加上 ui.fade.reveal ，fade 是一种渐变的动画效果 .. 在这个容器的里面就是要显示还有隐藏的内容 .. 先把默认显示的内容放到一个 div 里面，上面加上 visible ，再用一个 content .. 它里面就是默认要显示的内容 ..

插入一张图片 .. 这个图片的上面可以加上 ui.small.image .. 限定一下图片的尺寸 .. images/wireframe/square-image.png

在它下面可以再加上默认隐藏的内容，这个内容会在鼠标放到显示内容的时候显示出来 .. 同样用一个 div 标签 .. 加上 hidden ，还有 content .. 然后再加上具体的内容 ... 同样可以插入一张图片 .. 添加一个 ui.small.image ..

images/avatar/hulk.jpg

保存 　.. 在这个 Reveal 里面，会显示默认要显示的内容 .. 鼠标放在上面 .. 这个时候会用 fade 这个动画效果，把显示的内容隐藏起来，再把隐藏的内容显示出来 ...

除了用 fade 动画，还可以使用 move .. 复制一下 .. 在 Reveal 的包装元素上，把 fade 换在 move .. 再修改一下隐藏的内容 ... 保存 .. 默认这个动画会把显示的内容移动到左边，露出默认隐藏的内容 ..

在包装元素上，再用一些表示方向的类可以控制这个 move 动画移动的方向 .. 加上一个 right … 会向右边移动 … 用一个 up . 会向上移动 .. 使用一个 down .. 这样 move 动画会向下移动元素 ..

rotate 是一个旋转动画 .. 再复制一下 .. 在 Reveal 的包装元素上，用一个 rotate 类 .. 修改一下隐藏的内容 .. 保存 ..

鼠标放上去.. 会向右旋转，露出隐藏的内容 .. 如果想向左旋转，可以再加一个 left .. 再复制一下 .. 在 reveal 的容器上加一个 left .. 保存 .. 这样会向左旋转，然后露出隐藏的内容 ..