如何为卡片添加填充：悬停而不偏移？

问题描述 投票：0回答：1

如何为 :hover 添加填充而无需卡片偏移？我有一张 200 像素宽的卡片。当我将鼠标悬停在卡片上时，我需要添加 10px 填充，但不会失去其大小并移动其他卡片。

我需要它看起来像这样：示例

我的代码

CSS：

.person {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  grid-column: span 1;
  gap: 8px;
  padding-inline: 10px;
  padding-top: 10px;

  max-height: 231px;
  
  cursor: pointer;
  transition: all 300ms;
}

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


.extra {
  visibility: hidden;
  
  margin-bottom: 16px;

  font-size: 18px;
  color: var(--black-color);
}

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


/* with fixed height */
.details {
  transition: all 300ms;
  width: 100%;
  padding-inline: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.person:hover .details {
  background-color: var(--hover-color);
}
html css grid
1个回答
0
投票

这里发生的一些事情造成了问题。首先，看起来您使用了很多固定宽度。这还不错，但它不会扩展/响应。这就是填充不起作用的原因。卡片的宽度设置和图像的宽度设置。因此，如果添加填充，图像将获得填充，但随后保持其宽度并从卡中消失。

如果将图像宽度设置为 

max-width
，则带有 
width: 100%;
和 
height: auto
。然后添加填充即可解决此问题。

html {
  --photo-size: 200px;
  --rank-size: 32px;
  --white-color: #fff;
  --black-color: #000;
  --rank-color: #8B0000;
  --title-color: #2F4F4F;
  --hover-color: #EEE;
}
*, *::before, *::after {
    box-sizing: border-box;
}

.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;
  padding: 10px;
}

.photo__item {
  margin-bottom: 8px;

  object-fit: cover;
  max-width: var(--photo-size);
  height: auto;
  border-radius: 50%;
  transition: border-radius 300ms;
  width: 100%;
}

.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 {
  visibility: hidden;

  font-size: 18px;
  color: var(--black-color);
}

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

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

  .people {
    --columns: 4;
  }
}

/* with fixed height */
.details {
  transition: all 300ms;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.person:hover .details {
  background-color: var(--hover-color);
}
<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>
  <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/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/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/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/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>
</main>
</div>

注意，固定宽度也不错，例如 

--rank-size: 32px
是固定宽度是完全可以的。这完全取决于您如何使用和放置它们。

我建议研究box-sizing和响应式网页设计实践。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.