鼠标悬停的图像描述，如链接

Question

我想在图片中添加一些文字悬停在我网站的图片中;当鼠标光标移动到图像上时，显示有关该图像的一些文本。 我想添加一些关于该图像的描述。 但我希望盒子在这个网站上是这样的： http://libeskind.com/work/ 请看链接，并告诉我该怎么办？

我希望它与链接示例一样 谢谢大家

Answer 1

这是一个简单的工作，看看我的例子，我只是做了一个简单的例子，我没有添加过渡，因为我认为它会帮助你学习，尝试理解代码它​​真的很容易。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;