Html - How to add padding for :hover without offset for cards?

Sireus
September 1, 2023
316 views
0 votes
2 Answers

How to add padding for :hover without offset for cards? I have a card that is 200 pixels wide. I need to add 10px padding when I hover over the card, but without it losing its size and shifting other cards.

I need it to look like this: Example

My Code

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);
}

Answers

There are a few things going on here that are creating issues. First, it looks like you’re using a lot of fixed widths. This isn’t bad, but it won’t scale/be responsive. This is why the padding isn’t working. There is a width set for the card and a width set for the image. So if you add padding, the image gets the padding but then keeps it’s width and goes out of the card.

If you make the image width a max-width, with a width: 100%; and a height: auto. Then add padding to the .photo that should fix this issue.

Basically, the goal is to have everything inside the .photo card respect the padding on .photo. By giving them max-widths and width: 100%; you tell it to fill all of the space, but only up to the max. This will be helpful if you change the columns to 1 or 3, instead of 2.

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>

Note, fixed widths aren’t bad, for example --rank-size: 32px is totally fine to be a fixed width. It’s all about how you use and position them.

I’d recommend looking into box-sizing and responsive web design practices.

- ThomasTaylors
- September 1, 2023 at 8:55 am
- 0 votes
0
To add padding on :hover without creating an offset for cards, you can use the CSS transform property with the scale function. This will expand the card’s content while keeping its position fixed, effectively adding padding without shifting the card’s position. This CSS code enlarges the card by 5% when hovered over, creating the appearance of padding without offsetting the card’s position. Adjust the scale value as needed for your desired padding effect.

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to add padding for :hover without offset for cards?

Answers