Expanding a div with content without moving elements below it

Admin 1
Viewed 468

I have an element on the page which, when it is hovered over, expands and reveals some previously hidden text within it. The problem is that when the element expands, it moves other content below it. I tried to use position:absolute, but it has not achieved the desired effect.

.col {
  padding: 20px;
}

.col:hover {
  background-color: lightgray;
}

.revealOnHover {
  display: none;
  /*position: absolute;*/
}

#block1:hover .revealOnHover,
#block2:hover .revealOnHover {
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

<div class="container">

  <div class="row">
    <div class="col" id="block1">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Lorem ipsum dolor sit amet</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <div class="col" id="block2">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Excepteur sint occaecat cupidatat non proident</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>

  <p>&nbsp;</p>

  <div style="text-align: center;">
    <a href="https://google.com" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
    <a href="https://agoria.be" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
  </div>

</div>

My Code: https://codepen.io/eren5897/pen/GRqgOyd

bootstrap-4 css-position css html
3 Answers

You're not far off actually. position:absolute is the way to go, but you need a few additional styles to make it work, mainly in order to correctly position it and make it share the background color of its parent.

.col {
  padding: 20px;
}

.col:hover {
  background-color: lightgray;
}

.revealOnHover {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  padding: 10px;
  background: inherit;
}

#block1:hover .revealOnHover,
#block2:hover .revealOnHover {
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

<div class="container">

  <div class="row">
    <div class="col" id="block1">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Lorem ipsum dolor sit amet</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <div class="col" id="block2">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Excepteur sint occaecat cupidatat non proident</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>

  <p>&nbsp;</p>

  <div style="text-align: center;">
    <a href="https://google.com" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
    <a href="https://agoria.be" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
  </div>

</div>

user_54818070

Add min-height to your row class

Your class becomes

.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
min-height: 317PX;}
user_144190920

How about adding

.row {
  min-height: 20rem
}

This makes sure that they don't move when the divs are being expanded.

user_114562660
Related