Image stretching with container on hover - html

Question

When I hover over the red box, the reddit logo stretches with it, any way to fix this? I hope the snippet will help you understand my problem. Seems like it's a problem with "translate: scaleY();", but I can't use transitions or animations because I'm making like a card and elements push each other.
* {
margin: 0;
}
li {
list-style: none;
}
#card {
width: 460px;
height: 350px;
left: 50%;
transform: translate(-50%);
position: absolute;
}
#socialLinks {
display: inline-flex;
padding: 0;
}
#socialLinks li:hover {
transform-origin: bottom;
transform: scaleY(1.1);
}
#socialLinks li {
width: 152px;
height: 100px;
border-style: solid;
border-color: rgb(43, 43, 43);
border-width: 1px;
transition-timing-function: ease-in-out;
transition-duration: 0.3s;
transform: scaleY(1);
}
#socialLink1 {
background: tomato;
}
.logoReddit {
width: 85px;
height: 75px;
}
<div id="card">
<ul id="socialLinks">
<li id="socialLink1">
<a href="#">
<img
class="logoReddit" src="https://i.ibb.co/1QWXV8g/reddit-logo.png" alt="reddit-logo">
</a>
</li>
</ul>
</div>

Answer 1

Try these CSS rules:
#socialLinks li .logoReddit {
transition: .3s ease-in-out;
}
#socialLinks li:hover .logoReddit {
transform: scaleY(0.9);
}