我想在图片中添加一些文字悬停在我网站的图片中;当鼠标光标移动到图像上时,显示有关该图像的一些文本。 我想添加一些关于该图像的描述。 但我希望盒子在这个网站上是这样的: http://libeskind.com/work/ 请看链接,并告诉我该怎么办?
我希望它与链接示例一样 谢谢大家
答案 0 :(得分:0)
这是一个简单的工作,看看我的例子,我只是做了一个简单的例子,我没有添加过渡,因为我认为它会帮助你学习,尝试理解代码它真的很容易。
.imgc{width:100px;}
.imgc img{height:200px}
.imgc p {position:absolute;transition:1s all;padding:10px;background:#ddd;width:240px;display:none;margin-top:-20px}
.imgc:hover > p{display:block;}

<div class='imgc'>
<img src='http://libeskind.com/wp-content/uploads/aerial-view-c-guenter-schneider-555x426.jpg' />
<p>Hello World</p>
</div>
&#13;