html - 在不移动其他 div 的情况下悬停并转换 div

Question

我正在尝试放大并显示一些关于鼠标悬停在 div 上的额外信息。 我正在使用 Bootstrap 网格，位于鼠标悬停 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">
	    <div class="col-md-4 col-sm-6">
			<div class="product-section">
				<img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
				<h5> Cabinet_1 </h5>
				<div class="details">
					<p> PRICE : 19000 Yen </p>
					<p> Size : 162 X 72 X 80 cm </p>
				</div>
			</div>
		</div>
        <div class="col-md-4 col-sm-6">
			<div class="product-section">
				<img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
				<h5> Cabinet_2 </h5>
				<div class="details">
					<p> PRICE : 19000 Yen </p>
					<p> Size : 162 X 72 X 80 cm </p>
				</div>
			</div>
		</div>
        <div class="col-md-4 col-sm-6">
			<div class="product-section">
				<img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
				<h5> Cabinet_3 </h5>
				<div class="details">
					<p> PRICE : 19000 Yen </p>
					<p> Size : 162 X 72 X 80 cm </p>
				</div>
			</div>
		</div>
        <div class="col-md-4 col-sm-6">
			<div class="product-section">
				<img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
				<h5> Cabinet_4 </h5>
				<div class="details">
					<p> PRICE : 19000 Yen </p>
					<p> Size : 162 X 72 X 80 cm </p>
				</div>
			</div>
		</div>
        <div class="col-md-4 col-sm-6">
			<div class="product-section">
				<img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
				<h5> Cabinet_5 </h5>
				<div class="details">
					<p> PRICE : 19000 Yen </p>
					<p> Size : 162 X 72 X 80 cm </p>
				</div>
			</div>
		</div>
     </div>
   </div>
</div>

我需要将 div 放在它的位置，并在鼠标悬停时在其顶部显示额外的文本。 预先感谢您的帮助。

Answer 1

#each_p .product-section {
      border: 1px solid transparent;
      max-width: 400px;
      margin: 20px auto;
      overflow:hidden;
      position: relative;
      transform: scale(1);
      transition: all 0.5s ease;
    }
    #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);
    }
    #each_p .product-section:hover .details {
      transform: translateY(0%);
      visibility: visible;
      opacity: 1;
      z-index:100;
    }
    #each_p .product-section img {
      width: 250px;
      display: block;
      margin: 0 auto;
    }
    #each_p .product-section .details {
      transition: transform .2s linear, opacity .2s ease-in-out;
      transform: translateY(-100%);
      text-align: center;
      font-size: 16px;
      z-index:0;
      margin: 2px;
      visibility: hidden;
      opacity: 0;
    }
    #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">
	    <div class="col-md-4 col-sm-6">
			<div class="product-section">
				<img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
				<h5> Cabinet_1 </h5>
				<div class="details">
					<p> PRICE : 19000 Yen </p>
					<p> Size : 162 X 72 X 80 cm </p>
				</div>
			</div>
		</div>
        <div class="col-md-4 col-sm-6">
			<div class="product-section">
				<img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
				<h5> Cabinet_2 </h5>
				<div class="details">
					<p> PRICE : 19000 Yen </p>
					<p> Size : 162 X 72 X 80 cm </p>
				</div>
			</div>
		</div>
        <div class="col-md-4 col-sm-6">
			<div class="product-section">
				<img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
				<h5> Cabinet_3 </h5>
				<div class="details">
					<p> PRICE : 19000 Yen </p>
					<p> Size : 162 X 72 X 80 cm </p>
				</div>
			</div>
		</div>
        <div class="col-md-4 col-sm-6">
			<div class="product-section">
				<img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
				<h5> Cabinet_4 </h5>
				<div class="details">
					<p> PRICE : 19000 Yen </p>
					<p> Size : 162 X 72 X 80 cm </p>
				</div>
			</div>
		</div>
        <div class="col-md-4 col-sm-6">
			<div class="product-section">
				<img class="img-reposnive" src="../img/product/tv_cabinet/1.png">
				<h5> Cabinet_5 </h5>
				<div class="details">
					<p> PRICE : 19000 Yen </p>
					<p> Size : 162 X 72 X 80 cm </p>
				</div>
			</div>
		</div>
     </div>
   </div>
</div>