CSS 信息框翻转

标签 css image rollover

我正在尝试创建一个带有图像的简单鼠标悬停以显示提示或信息框/气泡。 我有一个包含图像 src 的 div 包装器,以及用于设置包装器和子项样式/位置的 css。 我只是不知道如何使 img src 具有交互性。 这是 html:

    <div class="wrapper">
        <img src="images/gallery/wheat3.png" width="250" height="250" data-stellar-ratio="3.5" data-stellar-vertical-offset="200">
    </div>

我想创建一个带有图像“wheat3.png”的翻转显示和侧面的信息框。

这里还有测试链接: http://hatfielddesign.com/witbier_test/

谢谢。

最佳答案

查看您显示的测试链接的源代码,似乎他们使用了 Stellar.js来实现这个效果。阅读 docs , 他们可能会帮助你 ;)

关于CSS 信息框翻转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14736557/

相关文章:

javascript - 翻转从数组中调用图像

html - 如何在两个维度上将文本置于图像顶部的中心?

javascript - 隐藏元素问题

javascript - flot 饼图在饼标签中未显示值 1

css - CSS 中隐式和显式定义的列

带有 Image 列的 SQL SELECT 语句速度缓慢

html - 单击更改 HTML 背景图像

javascript - HTML Javascript 使用 slider 栏步骤更改图像

html - CSS 无法让悬停状态在简单的 div 上运行

javascript - 单击时增加图像尺寸和高度