Question

我是一名制作投资组合网站的插画家。我正在尝试使用Dreamweaver创建一个翻转css过渡。我希望如此，当您翻转图像时，文本将会上升以显示图像。

Answer 1

你的意思是这样 - DEMO？

我所做的是，我创建了两个班级（.pic和.text）。 .pic保存图片，另一个类包含文本。 .text课程位于.pic的底部，height 0; :hover .text 0 150px;将<div class="pic"><img src="http://placekitten.com/200/300" /> <div class="text"><p>This is a cat</p></div> </div>的高度转换为.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; }到{{1}}

这是我演示的代码

<强> HTML

{{1}}

<强> CSS

{{1}}

Answer 2

通过滚动图像，你的意思是鼠标悬停事件？这可以通过多种方式完成。但可能如果你没有太多的CSS或JavaScript知识。然后只需下载图片标题插件。我想到的一个这样的插件叫做jquery capty。只是google它并遵循添加2行代码的说明。它很简单。
另一种方法是在图像上使用标题文本的CSS定位并使用display：none最初和鼠标悬停事件，使用css：hover伪类并给它显示：inline -块。希望这有助于

Answer 3

执行此操作的最佳方法是在Dreamweaver中为:hover文件添加CSS个事件。

类似的东西：

.class {
    background: blue;
}

.class:hover {
    background: red;
}

DEMO

这不是我所见过的Illustrator能够做到的并将其传输到Dreamweaver

使用CSS过渡在图像上进行文本

3 个答案: