Html CSS-悬停时展开div，不移动其他div

我需要创建产品网格：

• 具有固定的div高度
• 展开-仅在div:hover上显示大文本
• 不要移动其他div
• CSS

工作样本：

我的代码：

CSS

.product-grid {}
.item_box_in2 {
    display: inline-block;
    border: 1px #DDD solid;
    width: 30%;
    float: left;
    margin-left: 5px;
    margin-bottom: 5px;
    background-color: #f1f1f1;
    height: 15em;
    overflow:hidden;}
.item_box_in2:hover {
    overflow: visible;
    height: auto;
}

HTML

<div class="product-grid">
<!--Product 1-->
<div class="item_box_in2">    
<h1>Title 1</h1>
    <p>Text 1</p>
    <p>Price 1</p>
    <p>Desk 111111111 111111111 11111111</p>
</div>
<!--Product 2-->
<div class="item_box_in2">   
<h1>Title 2</h1>
    <p>Text 2</p>
    <p>Price 2</p>
    <p>Desk 222222222 2222222222 22222222222 222222222 222222222222 22222222222222 222222222222 222222222222222 22222222222222 22222222222222 222 222222222222 22222222222 2222222222222222 2222222222222222222222 222222 22222222222 22222222222</p>
</div>
<!--Product 3-->
<div class="item_box_in2">   
<h1>Title 3</h1>
    <p>Text 3</p>
    <p>Price 3</p>
    <p>Desk 333333333 333333333 33333333333333333 333333333333333 333333333333333 3333333333333333 33333333333333333333 33333</p>
</div>
<!--Product 1-->
<div class="item_box_in2">   
<h1>Title 1</h1>
    <p>Text 1</p>
    <p>Price 1</p>
    <p>Desk 111111111 111111111 11111111</p>
</div>
<!--Product 2-->
<div class="item_box_in2">   
<h1>Title 2</h1>
    <p>Text 2</p>
    <p>Price 2</p>
    <p>Desk 222222222 2222222222 22222222222 222222222 222222222222 22222222222222 222222222222 222222222222222 22222222222222 22222222222222 222 222222222222 22222222222 2222222222222222 2222222222222222222222 222222 22222222222 22222222222</p>
</div>
<!--Product 3-->
<div class="item_box_in2">
<h1>Title 3</h1>
    <p>Text 3</p>
    <p>Price 3</p>
    <p>Desk 333333333 333333333 33333333333333333 333333333333333 333333333333333 3333333333333333 33333333333333333333 33333</p>
</div>
</div>

标题1
文本1

价格1

办公桌11111111111111111111

标题2
文本2

价格2

222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222

标题3
文本3

价格3

333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333

标题1
文本1

价格1

办公桌11111111111111111111

标题2
文本2

价格2

222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222

标题3
文本3

价格3

333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333

您最好给每个div一个唯一的ID，然后定位它们（不使用相对，因为它会在它们展开时移动它们），并为每个ID做一个悬停，例如

ID-TopRowBox1:hover {
    height: 400px;
    position: absolute;
    z-index: 9999;
}
ID-BottomRowBox1:hover {
    height: 400px;
    position: absolute;
    z-index: -9999;
}

我希望这有助于解决您的问题：）