Jquery - FadeIn appears to be pushing down div-CodePudding

Jquery Fadein appears to be pushing down the div, after fading in the hidden one. What would be the best way to tackle this? I have read a few of the old solutions, but they haven't helped. I've also tried removing the div class(the div class I want hidden, when it fades in) but that hasn't appeared to have helped either.

HTML

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>

  <div >
   <div >
     <div >
      <h2 >Mining & Resources</h2>
      <p >
        Here are the details when view more is hovered
      </p>
    </div>

    <h2 >Mining & Resources</h2>
    <button >View More</button>
  </div>

  <div >
    <div >
      <h2 >Defence</h2>
      <p >
        Here are the details when view more is hovered
      </p>
    </div>
    <h2 >Defence</h2>
    <button >View More</button>

  </div>

  <div >
    
    <div >
        <h2 >Energy & Water</h2>
        <p >
            Here are the details when view more is hovered
          </p>
        
    </div>

    <h2 >Energy & Water</h2>
    <button >View More</button>

  </div>

  <div >
    <div >
        <h2 >Public & Private Infrastucture</h2>
        <p >
            Here are the details when view more is hovered
          </p>

    </div>
    <h2 >Public & Private Infrastucture</h2>
    <button >View More</button>
  </div>

  <div >
    <div >
        <h2 >Commercial & Residential Building</h2>
        <p >
            Here are the details when view more is hovered
          </p>

    </div>
    <h2 >Commercial & Residential Building</h2>
    <button >View More</button>
  </div>

  <div >

    <div >
        <h2 >Industrial Manufacturing</h2>
        <p >
            Here are the details when view more is hovered
        </p>
    </div>
    
    <h2 >Industrial Manufacturing</h2>
    <button >View More</button>
  </div>
</div>






    <script src="app.js"></script>
</body>

</html>

CSS

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.centerThis{
    text-align: center;
    margin-top:20px;
}

.center2{
    text-align: center;
    background-color:red;
}

.container{
    margin-top: 20px;
    display: flex;                       /* establish flex container */
    flex-wrap: wrap;                     /* enable flex items to wrap */
    justify-content: space-around;
    
}

.button{
    background: red;
    color: white;
    padding:10px;
 
} 


.buttonTwo{
    background: red;
    color: white;
    padding:10px;
 
} 

.buttonThree{
    background: red;
    color: white;
    padding:10px;
 
} 

.buttonFour{
    background: red;
    color: white;
    padding:10px;
 
} 

.buttonFive{
    background: red;
    color: white;
    padding:10px;
 
} 

.buttonSix{
    background: red;
    color: white;
    padding:10px;
 
} 




.white{
    color: white;
    text-align: center;
    padding-top: 50px;
}


.hiddenOne{
    height:300px;
    padding-top: 20px;
    background-color: red;
    color: white;
}



.itemWithin{
    flex: 0 35%;
    height: 300px;
    margin-bottom: 2%;
    background-color: grey;

}
.itemWithin2{

    flex: 0 35%;
    height: 300px;
    background-color: grey;
    margin-bottom: 2%;
    
}
.itemWithin3{

    flex: 0 35%;
    height: 300px;
    background-color: grey;
    margin-bottom: 2%;
    
}


.itemWithin4{
    flex: 0 35%;
    height: 300px;
    
    background-color: grey;
    margin-bottom: 2%;

}
.itemWithin5{

    flex: 0 35%;
    height: 300px;

    background-color: grey;
    margin-bottom: 2%;
    
}
.itemWithin6{

    flex: 0 35%;
    height: 300px;
    background-color: grey;
    margin-bottom: 2%;
    
}

JavaScript/Jquery

$(document).ready(function () {
    $(".hiddenOne").hide();
    $(".button").hover(function () {
        $(this).parent().find('.hiddenOne').fadeIn("slow");
    })
    $(".hiddenOne").mouseleave(function () {
        $(this).fadeOut("slow");
    })

});

CodePudding user response：

change hiddenOne class to :

.hiddenOne{
    height:300px;
    padding-top: 20px;
    background-color: red;
    color: white;
    position: absolute;
    width:100%;
}

and add this class

.container > div{
   position:relative;
}

full code

$(document).ready(function() {
  $(".hiddenOne").hide();
  $(".button").hover(function() {
    $(this).parent().find('.hiddenOne').fadeIn("slow");
  })
  $(".hiddenOne").mouseleave(function() {
    $(this).fadeOut("slow");
  })

});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.centerThis {
  text-align: center;
  margin-top: 20px;
}

.center2 {
  text-align: center;
  background-color: red;
}

.container {
  margin-top: 20px;
  display: flex;
  /* establish flex container */
  flex-wrap: wrap;
  /* enable flex items to wrap */
  justify-content: space-around;
}

.button {
  background: red;
  color: white;
  padding: 10px;
}

.buttonTwo {
  background: red;
  color: white;
  padding: 10px;
}

.buttonThree {
  background: red;
  color: white;
  padding: 10px;
}

.buttonFour {
  background: red;
  color: white;
  padding: 10px;
}

.buttonFive {
  background: red;
  color: white;
  padding: 10px;
}

.buttonSix {
  background: red;
  color: white;
  padding: 10px;
}

.white {
  color: white;
  text-align: center;
  padding-top: 50px;
}

.hiddenOne {
  height: 300px;
  padding-top: 20px;
  background-color: red;
  color: white;
  position: absolute;
  width: 100%;
}

.itemWithin {
  flex: 0 35%;
  height: 300px;
  margin-bottom: 2%;
  background-color: grey;
}

.itemWithin2 {
  flex: 0 35%;
  height: 300px;
  background-color: grey;
  margin-bottom: 2%;
}

.itemWithin3 {
  flex: 0 35%;
  height: 300px;
  background-color: grey;
  margin-bottom: 2%;
}

.itemWithin4 {
  flex: 0 35%;
  height: 300px;
  background-color: grey;
  margin-bottom: 2%;
}

.itemWithin5 {
  flex: 0 35%;
  height: 300px;
  background-color: grey;
  margin-bottom: 2%;
}

.itemWithin6 {
  flex: 0 35%;
  height: 300px;
  background-color: grey;
  margin-bottom: 2%;
}

.container>div {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<div >
  <div >
    <div >
      <h2 >Mining & Resources</h2>
      <p >
        Here are the details when view more is hovered
      </p>
    </div>

    <h2 >Mining & Resources</h2>
    <button >View More</button>
  </div>

  <div >
    <div >
      <h2 >Defence</h2>
      <p >
        Here are the details when view more is hovered
      </p>
    </div>
    <h2 >Defence</h2>
    <button >View More</button>

  </div>

  <div >

    <div >
      <h2 >Energy & Water</h2>
      <p >
        Here are the details when view more is hovered
      </p>

    </div>

    <h2 >Energy & Water</h2>
    <button >View More</button>

  </div>

  <div >
    <div >
      <h2 >Public & Private Infrastucture</h2>
      <p >
        Here are the details when view more is hovered
      </p>

    </div>
    <h2 >Public & Private Infrastucture</h2>
    <button >View More</button>
  </div>

  <div >
    <div >
      <h2 >Commercial & Residential Building</h2>
      <p >
        Here are the details when view more is hovered
      </p>

    </div>
    <h2 >Commercial & Residential Building</h2>
    <button >View More</button>
  </div>

  <div >

    <div >
      <h2 >Industrial Manufacturing</h2>
      <p >
        Here are the details when view more is hovered
      </p>
    </div>

    <h2 >Industrial Manufacturing</h2>
    <button >View More</button>
  </div>
</div>

<script src="app.js"></script>