如何创建触摸屏悬停（hover）动效 -- 标题从下方升起

使用触摸屏上的touch事件模拟桌面系统上常见的图片悬停显示标题的动效。可使用Chrome移动仿真来测试。

模板，教程

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1920
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">

</head>

<body>
    <div class="container demo-3">
        <ul class="grid cs-style-3">
            <li>
                <figure>
                    <img src="https://tympanus.net/Tutorials/CaptionHoverEffects/images/2.png" alt="img02">
                    <figcaption>
                        <h3>Music</h3>
                        <span>Jacob Cummings</span>
                        <a href="https://dribbble.com/shots/1115960-Music">Take a look</a>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="https://tympanus.net/Tutorials/CaptionHoverEffects/images/3.png" alt="img03">
                    <figcaption>
                        <h3>Settings</h3>
                        <span>Jacob Cummings</span>
                        <a href="https://dribbble.com/shots/1116685-Settings">Take a look</a>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="https://tympanus.net/Tutorials/CaptionHoverEffects/images/6.png" alt="img06">
                    <figcaption>
                        <h3>Game Center</h3>
                        <span>Jacob Cummings</span>
                        <a href="https://dribbble.com/shots/1118904-Game-Center">Take a look</a>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="https://tympanus.net/Tutorials/CaptionHoverEffects/images/4.png" alt="img04">
                    <figcaption>
                        <h3>Safari</h3>
                        <span>Jacob Cummings</span>
                        <a href="https://dribbble.com/shots/1116775-Safari">Take a look</a>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="https://tympanus.net/Tutorials/CaptionHoverEffects/images/5.png" alt="img05">
                    <figcaption>
                        <h3>Phone</h3>
                        <span>Jacob Cummings</span>
                        <a href="https://dribbble.com/shots/1117308-Phone">Take a look</a>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="https://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png" alt="img01">
                    <figcaption>
                        <h3>Camera</h3>
                        <span>Jacob Cummings</span>
                        <a href="https://dribbble.com/shots/1115632-Camera">Take a look</a>
                    </figcaption>
                </figure>
            </li>
        </ul>
    </div>
    
    <script src="https://tympanus.net/Tutorials/CaptionHoverEffects/js/toucheffects.js"></script>
</body>

</html>

使用触摸屏上的touch事件模拟桌面系统上常见的图片悬停显示标题的动效。可使用Chrome移动仿真来测试。

模板，教程

编辑器支持Emmet

快捷键

使用触摸屏上的touch事件模拟桌面系统上常见的图片悬停显示标题的动效。 可使用Chrome移动仿真来测试。

模板，教程

如何创建触摸屏悬停（hover）动效 - 标题层叠

使用CSS3和jQuery创建的文章排版效果 - 3D折纸标题

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

使用触摸屏上的touch事件模拟桌面系统上常见的图片悬停显示标题的动效。可使用Chrome移动仿真来测试。