使用 CSS 过渡的图像上的文本

Posted 2023-05-08

【中文标题】使用 CSS 过渡的图像上的文本

【英文标题】：Text over image using CSS transitions

【发布时间】：2014-05-05 17:26:24

【问题描述】：

我是一名制作作品集网站的插画家。 我正在尝试使用 Dreamweaver 简单地创建一个翻转 CSS 过渡。我想要它，所以当您滚动图像时，文本会升起以提供有关图像的描述。

【参考方案1】：

你的意思是这样的 - DEMO？

我所做的是，我创建了两个类（.pic 和 .text）。 .pic 保存图片，另一个类包含文本。 .text 类位于 .pic 的底部，它有一个 height 或 0; 为了使文本出现在您 :hover 上方的图像上，我只是转换了 .text 的高度，在此从0到150px;的案例

这里是我的演示代码

HTML

<div class="pic"><img src="http://placekitten.com/200/300" />
    <div class="text"><p>This is a cat</p></div>
</div>

CSS

.pic 
    position: relative;
    width: 200px;
    height: 300px;
    overflow: hidden;


.text 
    position: absolute;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 0;
    text-align: center;    
    background: rgba(255, 255, 255, 0.7);
    transition: height 0.7s ease-out;    


.pic:hover > .text 
    height: 150px;

【讨论】：

这太完美了，非常感谢！！非常有帮助：D

没问题，但如果解决了您的问题，请勾选正确答案:)

做到了！我现在有点困惑，每次我把这个新组件放在我的旧布局中时，在设计视图中查看它时它在页面的另一侧，但在浏览器中它就位：s

【参考方案2】：

通过滚动图像，您是指鼠标悬停事件吗？这可以通过多种方式完成。但可能如果你没有太多的 css 或 javascript 知识。然后只需下载一个图像标题插件。我想到的一个这样的插件叫做 jquery capty。只需谷歌它并按照添加两行代码的说明进行操作。就这么简单。另一种方法是使用 CSS 定位图像上的标题文本并使用 display:none 最初和鼠标悬停事件，使用 css :hover 伪类并给它 display: inline-block .希望这会有所帮助

【参考方案3】：

最好的方法是在您进入 Dreamweaver 后在您的 CSS 文件中添加一个 :hover 事件。

类似的东西：

.class 
    background: blue;


.class:hover 
    background: red;

DEMO

这不是 Illustrator 能够做到并将其转移到 Dreamweaver 的事情