使用更多信息在悬停时展开div

Question

有没有办法让它到达用户将鼠标悬停在div上时，它会扩展更多信息。我正在尝试为电子商务网站执行此操作，因此它的图像显示名称，当有人悬停它时会显示价格，描述并添加到购物车左侧。

Html和css是首选​​，我正在考虑改变宽度，但我无法让它工作。

Answer 1

也许你想要这样的东西

<article>
  <p>Description and price</p>
  <img src="http://placekitten.com/200/300" alt="amazing item" />
</article>

<style type="text/css">
 article{
    float: left;
}
 article p{
    float: left;
    width: 0px;
    -webkit-transition: width .5s ease;
    -moz-transition: width .5s ease;
    -ms-transition: width .5s ease;
    -o-transition: width .5s ease;
    transition: width .5s ease;
}
 img{
    float: left;
}
 article:hover p{
    width: 150px;
}

</style>

Answer 2

多数民众赞成有趣，我在过去几天里做过这样的事情;

div.portfolio_item{
width:33%;
margin:1.5%;
margin-bottom:-30px;
background-color:white;
border-radius:20px;
float:left;
height:200px;
overflow:hidden;
text-align:justify;}

div.portfolio_item img {
max-width:95%;
margin:auto;}

div.portfolio_item p:first-child{
text-align:center;}

div.portfolio_item p:not(:first-child), div.portfolio_item h3 {
display:none;}

div.portfolio_item:hover p, div.portfolio_item:hover h3 {
display:block;}

div.portfolio_item:hover {
width:80%;
height:80%;
overflow:auto;
position:fixed;
margin:auto;
top:10%;
left:10%;
float:none;
clear:both;
border:solid black 1px;
z-index:10;}

你可以在我的投资组合页面上看到它实际上; http://www.briarmoon.ca/design/portfolio.html

图像位于第一个

标记中，然后其他所有内容都被隐藏，除非将其悬停在上面。在这一点上它弹出大部分屏幕。

HTH