I'm currently working on a website that showcases cards featuring Discord users. Each card includes an avatar image within a div element, and when the user hovers over it, the image expands. However, I've noticed that as it expands, it shifts to the left side. To illustrate this issue, I have added a border to the card in the example below:
Upon hovering over the image, you'll notice that it moves closer to the left edge of the box rather than centering itself. Is there a way to make the expanded image self-center within the card? Alternatively, is it possible for the width of the box to increase proportionally along with the height as the image expands?
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@1,200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
margin: 0px;
}
#accounts {
margin: 0px;
padding: 0px;
text-align: center;
}
.acc {
display: inline-block;
padding: 60px;
border-style: solid;
border-width: 1px;
border-color: aqua;
width: 200px;
}
.icons {
border-radius: 50%;
width: 200px;
transition: 0.75s;
object-fit: contain;
overflow: hidden;
}
.icons:hover {
width: 250px;
}
.nick {
color: white;
font-family: 'Quicksand', sans-serif;
font-weight: 500;
white-space: nowrap;
}
#nc1 {
margin-right: 13px;
}
#nc2 {
margin-left: 9px;
}
#sc-btn {
background-color: black;
display: flex;
justify-content: center;
text-align: center;
}
#sc-btn a:visited {
text-decoration: none;
}
#sc-btn a {
text-decoration: none;
margin-right: 8px;
border-radius: 30px;
}
#server-button {
padding: 0;
width: 250px;
height: 50px;
border-style: solid;
border-width: 1.5px;
border-radius: 30px;
border-color: white;
display: flex;
align-items: center;
justify-content: center;
transition: 0.75s;
}
#sv-btn-text {
font-weight: 100;
font-size: 28px;
font-family: 'Montserrat', sans-serif;
color: white;
margin: 0px;
padding: 0px;
transition: 0.75s;
}
#server-button:hover {
background-color: white;
}
#server-button:hover #sv-btn-text {
color: black;
}