使用CSS过渡在图片上输入文字 [英] Text over image using CSS transitions

问题描述

我是制作作品集网站的插画家。
我想使用Dreamweaver简单地创建一个过渡CSS过渡。我希望这样，当您将鼠标悬停在图片上时，文字会浮起来以提供有关图片的描述。

I am an illustrator making a portfolio site. I'm trying to simply create a rollover css transition with Dreamweaver. I would like it so when you roll over the image the text will rise up to give a description about the image.

推荐答案

您的意思是这样的-演示？

什么我要做的是，我创建了两个类（ .pic 和 .text ）。 .pic 保存图片，另一类包含文本。 .text 类位于 .pic 的底部，并且其高度为 h 的 0; 要使文本出现在：hover 上时，我只是在过渡 .text 的高度，在这种情况下，从 0 到 150px;

What I've done is, I've created two classes (.pic and .text). .pic holds the picture and the other class contains the text. The .text class is positioned at the bottom of .pic and it has a height of 0; To make the text appear when you :hover over the image I just transition the height of .text, in this case from 0 to 150px;

这里是我的演示中的代码

Here the code from my demo

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

这篇关于使用CSS过渡在图片上输入文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！