0

Не получается правильно задать работу 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;

}


1 ответ 1

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>

1
  • тоже вот читал про позиционирование в похожих случаях, но как применить это, я не мог понять. вник в ваши правки. в голове прояснилось) спасибо за помощь!)
    – Web_Dev
    12 авг 2022 в 9:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.