如何显示卡片中隐藏的元素，使其他人不动？ CSS [关闭]

Question

我有一个带有网格卡的块，每个网格卡都是200px。任务如下，如布局所示，当您将鼠标悬停在卡片上时，卡片中应出现带有内部缩进的背景，并且应出现带有专业的 .extra 元素。我该如何实现这一点，以便其他卡片不会移动，并且当您悬停时卡片本身会发生变化？

• 我尝试通过display:none / block来显示元素，但是其他卡跳了。
• 我尝试使用不透明度：0，可见性：隐藏，但在这种情况下，不考虑元素空间，并且 .extra 出现在背景之外。

这是代码：

html {
  --photo-size: 200px;
  --rank-size: 32px;
  --white-color: #fff;
  --black-color: #000;
  --rank-color: #8B0000;
  --title-color: #2F4F4F;
  --hover-color: #EEE;
}

.page {
  font-family: Arial, sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 35px;
}

.people {
  --columns: 2;
  display: grid;
  column-gap: 30px;
  row-gap: 40px;
  grid-template-columns: repeat(var(--columns), 200px);
  justify-content: center;
}

.person {
  display: inline-block;
  position: relative;
  grid-column: span 1;
  /* height: 231px; */
  cursor: pointer;
  transition: all 300ms;
}

.person:hover {
  background-color: var(--hover-color);
  border-radius: 10px;
}

.photo {
  display: flex;
  position: relative;
}

.photo__item {
  margin-bottom: 8px;
  object-fit: cover;
  width: var(--photo-size);
  height: var(--photo-size);
  border-radius: 50%;
  transition: border-radius 300ms;
}

.rank {
  position: absolute;
  top: calc((var(--photo-size) / 2) - (var(--rank-size) / 2));
  right: 10px;
  width: var(--rank-size);
  height: var(--rank-size);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  color: var(--rank-color);
  background-color: var(--white-color);
  border-radius: 50%;
}

.details {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 9px;
  z-index: 1;
}

.name {
  font-size: 20px;
  font-weight: 700;
  color: var(--title-color);
}

.extra {
  display: none;
  font-size: 18px;
  color: var(--black-color);
}

.person:hover .extra {
  display: block;
}

@media (min-width: 1000px) {
  .page {
    padding: 30px 55px;
  }
  .people {
    --columns: 4;
  }
}

<div class="page">
  <main class="people">
    <article class="person">
      <section class="photo">
        <img src="https://mate-academy.github.io/fe-program/css/tasks/athletes/people/Mayweather.jpg" alt="Floyd Mayweather" class="photo__item">
        <span class="rank">1</span>
      </section>
      <section class="details">
        <a class="name">Floyd Mayweather</a>
        <section class="extra">
          <span class="sport">Boxing</span>
          <span class="pay">285</span>
        </section>
      </section>
    </article>

    <article class="person">
      <section class="photo">
        <img src="https://mate-academy.github.io/fe-program/css/tasks/athletes/people/Messi.jpg" alt="Lionel Messi" class="photo__item">
        <span class="rank">2</span>
      </section>
      <section class="details">
        <a class="name">Lionel Messi</a>
        <section class="extra">
          <span class="sport">Soccer</span>
          <span class="pay">111</span>
        </section>
      </section>
    </article>

    <article class="person">
      <section class="photo">
        <img src="https://mate-academy.github.io/fe-program/css/tasks/athletes/people/Ronaldo.jpg" alt="Cristiano Ronaldo" class="photo__item">
        <span class="rank">3</span>
      </section>
      <section class="details">
        <a class="name">Cristiano Ronaldo</a>
        <section class="extra">
          <span class="sport">Soccer</span>
          <span class="pay">108</span>
        </section>
      </section>
    </article>

    <article class="person">
      <section class="photo">
        <img src="https://mate-academy.github.io/fe-program/css/tasks/athletes/people/McGregor.jpg" alt="Conor McGregor" class="photo__item">
        <span class="rank">4</span>
      </section>
      <section class="details">
        <a class="name">Conor McGregor</a>
        <section class="extra">
          <span class="sport">Mixed Martial Arts</span>
          <span class="pay">99</span>
        </section>
      </section>
    </article>
  </main>
</div>

Answer 1

尝试在代码中添加以下 css，看看它是否是您正在寻找的内容。

.extra {
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms, visibility 300ms;
}

.person:hover .extra {
  opacity: 1;
  visibility: visible;
}