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

Question

我是一名制作作品集网站的插画家。我正在尝试使用 Dreamweaver 简单地创建一个翻转 css 转换。我希望这样，当您将鼠标悬停在图像上时，文本会升起以提供有关图像的描述。

Answer 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;
}