Не правильное отображение блоков при использовании hover

Question

Не получается правильно задать работу hover эффекта. При наведении нужный блок с текстом должен полностью раскрываться и отображать скрытую часть текста. Но в результате все соседние блоки также начинают растягиваться на ширину целевого раскрытого блока, а также отодвигаются все нижние блоки, чего быть не должно. Верхние блоки, при ховере, должны частично скрывать нижние блоки. На скрине видно как должно быть.

То что вышло у меня:

codepen - https://codepen.io/Den323/pen/poLOKxG

Мой html:

<div class="courses">
    <div class="container">

      <div class="courses__title">
      Курсы
    </div>

    <div class="courses__inner">


      <div class="courses__item" style="background: 
rgba(255, 182, 182, 1);">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++  с нуля до героя
        </div>
        <p class="courses__item-text">
        s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime? <p class="courses__hidden">
           ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

          <a class="courses__item-link" href="#">
            Детальнее
          </a>
          </p> 
        </p>
      </div>

      <div class="courses__item">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++  с нуля до героя
        </div>
        <p class="courses__item-text">
         s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
         ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>

      <div class="courses__item" style="background: #FFF7B9;">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          JS  с нуля и до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
         ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>

      <div class="courses__item" style="background: #CCC1F6;">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++  с нуля до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
          ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>

      <div class="courses__item" style="background: #CCC1F6;">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++  с нуля до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
         ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>

      <div class="courses__item" style="background: #FFF7B9;">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
        JS  с нуля и до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
          ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>

      <div class="courses__item" style="background: #FFB6B6;">
      
        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++  с нуля до героя
        </div>
        <p class="courses__item-text">
         s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
        <p class="courses__hidden">
          ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
      
          <a class="courses__item-link" href="#">
            Детальнее
          </a>
        </p>
        </p>
      </div>
      
          <div class="courses__item" style="background: #C2E0FF;">
          
            <img class="courses__img" src="images/icons/courses.svg" alt="">
            <div class="courses__item-name">
              C++  с нуля до героя
            </div>
            <p class="courses__item-text">
             s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
            <p class="courses__hidden">
              ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          
              <a class="courses__item-link" href="#">
                Детальнее
              </a>
            </p>
            </p>
          </div>

     
      

      


    </div>

    </div>
    
  </div>

Мой css:

courses {
  padding-bottom: 160px;
}

.courses__title {
  font-family: 'Bitter';
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: 0.5px;
  color: rgba(35, 38, 45, 1);
  margin-top: 36px;
  margin-bottom: 70px;
}

.courses__item {
  padding: 30px 20px;
  max-width: 285px;
  background: rgba(194, 224, 255, 1);
  border-radius: 8px;
  cursor: pointer;


}

.courses__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 2fr));
  grid-row-gap: 37px;
  grid-column-gap: 30px;
}

.courses__item-name {
  font-family: 'Segoe UI';
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  color: rgba(35, 38, 45, 1);
  margin-top: 30px;
  margin-bottom: 20px;
  width: 221px;
}

.courses__item-text {
  font-family: 'Segoe UI';
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;

}


.courses__item-link {
  font-family: 'Bitter';
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: rgba(35, 38, 45, 1);
  text-align: right;
  display: block;
  position: relative;
  margin-top: 20px;
}

.courses__item-link::before {
  content: '';
  width: 95px;
  height: 2px;
  background-color: #000;
  position: absolute;
  top: 18px;
  right: 0;
}



.courses__hidden {
  display: none;
  font-family: 'Segoe UI';
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}


.courses__item:hover .courses__hidden {
  display: inline;
  z-index: 10;

}

Answer 1

Необходимо скрытую часть позиционировать с помощью position: absolute

Пример

courses {
  padding-bottom: 160px;
}

.courses__title {
  font-family: 'Bitter';
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: 0.5px;
  color: rgba(35, 38, 45, 1);
  margin-top: 36px;
  margin-bottom: 70px;
}

.courses__item {
  padding: 30px 20px;
  max-width: 285px;
  background: rgba(194, 224, 255, 1);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}

.courses__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 2fr));
  grid-row-gap: 37px;
  grid-column-gap: 30px;
}

.courses__item-name {
  font-family: 'Segoe UI';
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  color: rgba(35, 38, 45, 1);
  margin-top: 30px;
  margin-bottom: 20px;
  width: 221px;
}

.courses__item-text {
  font-family: 'Segoe UI';
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

.courses__item-link {
  font-family: 'Bitter';
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: rgba(35, 38, 45, 1);
  text-align: right;
  display: block;
  position: relative;
  margin-top: 20px;
}

.courses__item-link::before {
  content: '';
  width: 95px;
  height: 2px;
  background-color: #000;
  position: absolute;
  top: 18px;
  right: 0;
}

.courses__hidden {
  display: none;
  font-family: 'Segoe UI';
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  position: absolute;
  top: calc(100% - 40px);
  left: 0;
  padding: 0 20px 30px;
  border-radius: 0 0 8px 8px;
}

.courses__item:hover .courses__hidden {
  display: block;
  z-index: 10;
  background: rgba(194, 224, 255, 1);
  box-shadow: 0 4px 2px -2px gray;
}

<div class="courses">
  <div class="container">

    <div class="courses__title">
      Курсы
    </div>

    <div class="courses__inner">


      <div class="courses__item" style="background: 
rgba(255, 182, 182, 1);">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++ с нуля до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          <p class="courses__hidden" style="background: 
rgba(255, 182, 182, 1);">
            ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

            <a class="courses__item-link" href="#">
              Детальнее
            </a>
          </p>
        </p>
      </div>

      <div class="courses__item">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++ с нуля до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          <p class="courses__hidden">
            ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

            <a class="courses__item-link" href="#">
              Детальнее
            </a>
          </p>
        </p>
      </div>

      <div class="courses__item" style="background: #FFF7B9;">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          JS с нуля и до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          <p class="courses__hidden" style="background: #FFF7B9;">
            ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

            <a class="courses__item-link" href="#">
              Детальнее
            </a>
          </p>
        </p>
      </div>

      <div class="courses__item" style="background: #CCC1F6;">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++ с нуля до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          <p class="courses__hidden" style="background: #CCC1F6;">
            ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

            <a class="courses__item-link" href="#">
              Детальнее
            </a>
          </p>
        </p>
      </div>

      <div class="courses__item" style="background: #CCC1F6;">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++ с нуля до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          <p class="courses__hidden" style="background: #CCC1F6;">
            ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

            <a class="courses__item-link" href="#">
              Детальнее
            </a>
          </p>
        </p>
      </div>

      <div class="courses__item" style="background: #FFF7B9;">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          JS с нуля и до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          <p class="courses__hidden" style="background: #FFF7B9;">
            ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

            <a class="courses__item-link" href="#">
              Детальнее
            </a>
          </p>
        </p>
      </div>

      <div class="courses__item" style="background: #FFB6B6;">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++ с нуля до героя
        </div>
        <p class="courses__item-text">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          <p class="courses__hidden" style="background: #FFB6B6;">
            ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

            <a class="courses__item-link" href="#">
              Детальнее
            </a>
          </p>
        </p>
      </div>

      <div class="courses__item" style="background: #C2E0FF;">

        <img class="courses__img" src="images/icons/courses.svg" alt="">
        <div class="courses__item-name">
          C++ с нуля до героя
        </div>
        <p class="courses__item-text" style="background: #C2E0FF;">
          s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?
          <p class="courses__hidden">
            ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime? ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime? ?s doloribus quas, distinctio
            vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime? ?s doloribus quas, distinctio vel! Beatae dolores maiores, inventore suscipit provident nulla, cu error maxime?

            <a class="courses__item-link" href="#">
              Детальнее
            </a>
          </p>
        </p>
      </div>







    </div>

  </div>

</div>

БЛОГ НА HUSL

Не правильное отображение блоков при использовании hover

Ответы (1 шт):