2
我想放大並顯示鼠標懸停在div上的一些額外信息。 我正在使用引導網格，躺在鼠標houvering div下面的div是定位。懸停並轉換div而不移動其他div
我的代碼是在這裏：
#each_p .product-section {
max-width: 400px;
margin: 20px auto;
overflow:hidden;
position: relative;
}
#each_p .product-section:hover {
border: 1px solid #717070;
background-color: #fff;
box-shadow: 0 6px 12px rgba(0, 0, 0, .275);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
transform: scale(1.1);
overflow: visible;
}
#each_p .product-section:hover .details {
transform: translateY(0%);
display:block;
z-index:100;
}
#each_p .product-section img {
width: 250px;
display: block;
margin: 0 auto;
}
#each_p .product-section .details {
display: none;
transition: transform .2s linear, opacity .2s ease-in-out;
transform: translateY(-100%);
text-align: center;
font-size: 16px;
z-index:0;
margin: 2px;
}
#each_p h4 {
margin-top: 50px;
font-size: 30px !important;
}
#each_p h5{
font-size: 20px;
text-align: center;
}<div id="each_p">
<div class="row">
\t <div class="col-md-4 col-sm-6">
\t \t \t <div class="product-section">
\t \t \t \t <img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
\t \t \t \t <h5> Cabinet_1 </h5>
\t \t \t \t <div class="details">
\t \t \t \t \t <p> PRICE : 19000 Yen </p>
\t \t \t \t \t <p> Size : 162 X 72 X 80 cm </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
<div class="col-md-4 col-sm-6">
\t \t \t <div class="product-section">
\t \t \t \t <img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
\t \t \t \t <h5> Cabinet_2 </h5>
\t \t \t \t <div class="details">
\t \t \t \t \t <p> PRICE : 19000 Yen </p>
\t \t \t \t \t <p> Size : 162 X 72 X 80 cm </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
<div class="col-md-4 col-sm-6">
\t \t \t <div class="product-section">
\t \t \t \t <img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
\t \t \t \t <h5> Cabinet_3 </h5>
\t \t \t \t <div class="details">
\t \t \t \t \t <p> PRICE : 19000 Yen </p>
\t \t \t \t \t <p> Size : 162 X 72 X 80 cm </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
<div class="col-md-4 col-sm-6">
\t \t \t <div class="product-section">
\t \t \t \t <img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
\t \t \t \t <h5> Cabinet_4 </h5>
\t \t \t \t <div class="details">
\t \t \t \t \t <p> PRICE : 19000 Yen </p>
\t \t \t \t \t <p> Size : 162 X 72 X 80 cm </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
<div class="col-md-4 col-sm-6">
\t \t \t <div class="product-section">
\t \t \t \t <img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
\t \t \t \t <h5> Cabinet_5 </h5>
\t \t \t \t <div class="details">
\t \t \t \t \t <p> PRICE : 19000 Yen </p>
\t \t \t \t \t <p> Size : 162 X 72 X 80 cm </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
</div>
</div>
</div>我需要的div是在自己的位置並在鼠標懸停在它上面要顯示的額外的文本。 非常感謝您的幫助。
，你能否告訴任何例如對於相同的，你想請...？ –
http://www.ikea.com/jp/en/catalog/categories/departments/bedroom/16284/ –
以上是我想要創建的示例。只需通過懸停在圖像上進行檢查即可 –