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