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);
}
2
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 awidth: 100%;
and aheight: 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 themmax-widths
andwidth: 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.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.
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.