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

Question

Ильдар

css , javascript

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

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

8 февраля 2024 г. 19:18

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для создания такого эффекта галереи изображений можно использовать Flexbox в CSS. Flexbox позволяет выравнивать и распределять пространство среди элементов в контейнере даже когда их размеры неизвестны или динамичны.

Вот пример кода, который реализует галерею изображений с эффектом увеличения изображения при наведении и пропорциональным сжатием остальных изображений:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<style>
  .gallery {
    display: flex; /* используем Flexbox */
  }
  
  .gallery div {
    flex: 1; /* раздаем пространство поровну */
    transition: flex-grow 0.5s; /* плавный переход для увеличения изображения */
    overflow: hidden; /* избегаем выхода изображения за пределы блока */
  }
  
  .gallery img {
    width: 100%; /* ширина изображения относительно своего блока */
    height: auto; /* автоматическая высота для сохранения пропорций */
    transition: transform 0.5s; /* плавный переход для трансформации изображения */
  }
  
  .gallery div:hover {
    flex-grow: 2; /* увеличиваем элемент, на который навели мышкой */
  }
  
  .gallery div:hover img {
    transform: scale(1.1); /* увеличиваем изображение */
  }
</style>
</head>
<body>

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

</body>
</html>
```

В этом коде:

- Каждому `div` внутри контейнера с классом `gallery` устанавливается свойство `flex` со значением `1`. Это означает, что все `div` будут иметь одинаковую ширину.
- Для `div`, на который происходит наведение указателя мыши, устанавливается `flex-grow` значение `2`, что означает, что этот `div` попытается занять в два раза больше пространства по сравнению с другими `div` внутри контейнера.
- Свойство `transition` используется для создания плавного перехода для увеличения блоков и изображений.

Обратите внимание, что значения для `flex-grow` и прочих свойств можно корректировать для достижения желаемого визуального эффекта. Также вы можете добавить медиа-запросы, чтобы адаптировать галерею для разных размеров экранов.