Замена изображений при наведении без ущерба для макета ⇐ CSS

[Anonymous]

Коротко говоря, у меня есть раскрывающееся меню с тремя изображениями сигарет (250x34). Когда я навожу на них курсор, они превращаются в сигареты с дымом (250х222). При наведении мысли второй образ оттесняет другие образы. Я понимаю разницу в высоте, но изображения оба в формате PNG, и я ожидал, что это сработает. Буду очень признателен за любой совет или помощь.
Я что-то знаю о разнице в высоте, но не могу найти, что это такое.
Это HTML-код
















CSS-код:
#dropdownMenuButton{
width: 130px;
padding-top: 20px;
padding-left: 20px;
}

/* Edw editarw to dropdown menu(icon) */
.dropdown {
position: relative;
display: inline-block;
transition: 0.5s;
z-index: 10;
}

/* To hover tou dropdown */
.dropdown:hover{
transform: scale(1.1);
}

/* Edw clickarw to dropdown kai ginetai responsive */
.dropdown-toggle {
cursor: pointer;
width: 140px;
}

/* Edw vrisketai to periexomeno tou dropdown */
.dropdown-menu {
display: none;
position: absolute;
z-index: -10;
min-width: 50px;
}

/* Edw vrisketai to a href tou menu */
.dropdown-menu a {
display: block;
}

#image1,#image2,#image3{
height: auto;
width: 100px;
padding-top: 10px;
padding-left: 44px;

}

/* Dropdown icon hover effect */
.dropdown-icon {
transition: transform 0.5s ease;
}

.dropdown-icon:hover {
transform: translateX(10px);

}


И, наконец, js-код:
document.addEventListener('DOMContentLoaded', () => {
const dropdownIcons = document.querySelectorAll('.dropdown-icon');
const newImages = [
"images/clothesSmoke.png", // Update these paths
"images/aboutSmoke.png", // Update these paths
"images/contactSmoke.png" // Update these paths
];
const originalImages = [
"images/clothes.png",
"images/about.png",
"images/contact.png"
];

dropdownIcons.forEach((icon, index) => {
const targetImage = document.querySelector(`#image${index + 1}`);

icon.addEventListener('mouseover', (event) => {
event.preventDefault(); // Prevent the default anchor behavior
if (targetImage) {
// Fade out the current image
targetImage.classList.add('fade-out');

// After the fade out, change the src and fade in the new image
setTimeout(() => {
targetImage.src = newImages[index];
targetImage.classList.remove('fade-out');
}, 500); // Duration matches the CSS transition duration
} else {
console.error(`Image #image${index + 1} not found`);
}
});

icon.addEventListener('mouseleave', (event) => {
event.preventDefault(); // Prevent the default anchor behavior
if (targetImage) {
// Fade out the current image
targetImage.classList.add('fade-out');

// After the fade out, change the src back to the original and fade in
setTimeout(() => {
targetImage.src = originalImages[index];
targetImage.classList.remove('fade-out');
}, 500); // Duration matches the CSS transition duration
} else {
console.error(`Image #image${index + 1} not found`);
}
});
});
});


Подробнее здесь: https://stackoverflow.com/questions/785 ... the-layout