Why is my image not scaled correctly when hovered? - html

Question

I'm building a website for a side project and I need to have 2 cards, presenting someone with an image on the left and some text + another image on the right.
I want that card to be 1.1 times scaled when hovered or focused but when I do the usual method (as in the snippet), somehow the image on the right shifts a bit to the top.
/* GÉNÉRAL */
:root {
--color-accent: #4e6eff;
--color-accent-dark: #3a56d3;
--color-black: #252728;
--color-white: #fdfdff;
--color-blacker: #0c0d0d;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 0;
}
body::-webkit-scrollbar {
display: none;
}
* {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::selection {
background-color: #4e6effba;
}
body {
background-color: var(--color-black);
color: var(--color-white);
}
/* COMMON STYLE */
.bg-accent {
background-color: var(--color-accent);
color: var(--color-white);
}
a {
color: var(--color-white);
text-decoration: none;
}
img {
width: 100%;
}
/* */
.select-membres__row--2 {
display: flex;
justify-content: space-evenly;
}
.membre-carte {
display: flex;
padding: 1em;
width: 400px;
height: 200px;
gap: 8%;
border-radius: 25px;
background-color: var(--color-blacker);
text-align: center;
scale: 1;
transition: scale 100ms ease-out;
}
.membre-carte:hover {
scale: 1.1;
transition: scale 150ms cubic-bezier(0.22, 0.47, 0.35, 0.92);
border: 3px solid var(--color-accent);
}
.membre-carte>* {
width: 50%;
}
.membre-carte .carte-pp {
border-radius: calc(25px - 0.5em);
}
.perso-cont {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.carte__nom {
font-size: 1.2rem;
}
.perso-cont .img-cont {
width: 120px;
margin-inline: auto;
display: flex;
}
<div class="select-membres__row--2">
<a href="#">
<div class="membre-carte">
<img src="https://source.unsplash.com/random/50x50" class="carte-pp">
<div class="perso-cont">
<h4 class="carte__nom">image 1</h4>
<p class="carte__surnom">lorem</p>
<div class="img-cont">
<img src="https://source.unsplash.com/random/40x40">
</div>
</div>
</div>
</a>
<a href="#">
<div class="membre-carte">
<img src="https://source.unsplash.com/random/50x50" class="carte-pp">
<div class="perso-cont">
<div>
<h4 class="carte__nom">image 2</h4>
<p class="carte__surnom">lorem</p>
</div>
<div class="img-cont">
<img src="https://source.unsplash.com/random/40x40">
</div>
</div>
</div>
</a>
</div>

Answer 1

The border in .membre-carte:hover consumes an extra 6px (top 3px and bottom 3px) from the total height of the cart leaving less room for the content to fit in.
Add a transparent border like .membre-carte { border: 3px solid transparent } to you CSS and the movement will disappear, because now both the unhovered vs. hovered state consume the same amount of space again.
Be aware that you will lose 6px of the carts spaces for their content to fit in.