Hover and transform on div without moving other divs

Question

I am trying to enlarge and show some extra info on mouse hover on div. I am using bootstrap grid, the div lying below the mouse-houvering div is locating.

My code is here:

#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>

I need the divs to be at its place and the extra text to be displayed on top of it on mouse hover. Thank you in advance for your help.

Can you show any example for the same that you want please...? — Rohit Sharma, Jun 23 '17 at 05:36
http://www.ikea.com/jp/en/catalog/categories/departments/bedroom/16284/ — Deeksha Bajaj, Jun 23 '17 at 05:43
the above is an example of what i want to create. just check by hovering on the image — Deeksha Bajaj, Jun 23 '17 at 05:44

score -1 · Answer 1 · answered Jun 23 '17 at 05:57

#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>

Hover and transform on div without moving other divs

1 Answers1