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