Как сделать блок картинок в ряд, при ховере на одну из них, она увеличивается по ширине, а соседние сжимаются пропорционально?

Чтобы реализовать блок картинок в ряд, где при наведении на одну из них она увеличивается по ширине, а соседние сжимаются пропорционально, вам понадобится использовать HTML, CSS и JavaScript.

Первым шагом будет создание разметки HTML для блока картинок. Вот простой пример:

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

Здесь мы создали контейнер image-container и добавили три img элемента с путями к изображениям (замените пути на ваши собственные).

Затем, добавим стили для контейнера и изображений в CSS:

.image-container {
  display: flex;
}

.image-container img {
  width: 200px;
  transition: width 0.3s;
}

.image-container img:hover {
  width: 300px;
}

Здесь мы используем свойство display: flex;, чтобы разместить изображения в одну линию.
Устанавливаем начальную ширину изображений на 200 пикселей с переходом по ширине в течение 0.3 секунды.

В последнем правиле стилей мы используем псевдокласс :hover, чтобы устанавливать ширину изображения на 300 пикселей при наведении.
После применения этих стилей, при наведении курсора на изображение, оно будет увеличиваться, а соседние изображения будут сжиматься пропорционально.

Однако, чтобы анимация работала так, как вы описали, вам потребуется использовать JavaScript. Для этого добавим следующий скрипт после закрывающего тега </div>:

const images = document.querySelectorAll('.image-container img');

images.forEach((image) => {
  image.addEventListener('mouseenter', () => {
    images.forEach((img) => {
      if (img !== image) {
        img.style.width = '100px'; // При наведении на одно изображение сжимаем все остальные до 100 пикселей
      }
    });
  });
  
  image.addEventListener('mouseleave', () => {
    images.forEach((img) => {
      img.style.width = '200px'; // При уходе с изображения возвращаем начальную ширину для всех изображений
    });
  });
});

В этом скрипте мы используем метод querySelectorAll для выбора всех изображений в контейнере и добавляем обработчики событий mouseenter и mouseleave.
При наведении на одно изображение, мы проходимся по всем изображениям и устанавливаем ширину 100 пикселей для всех изображений, кроме того, на которое навели курсор.
При уходе с изображения мы возвращаем начальную ширину 200 пикселей для всех изображений.

В результате, при наведении курсора на одно изображение в ряду, оно увеличивается по ширине, а остальные изображения сжимаются до 100 пикселей. При уходе с изображения все изображения возвращаются к начальной ширине 200 пикселей.

Надеюсь, этот ответ помог вам разобраться с реализацией блока картинок в ряд с эффектом увеличения при наведении курсора!