Увеличение картинки при наведении курсора

[Donovan]

Привет всем.

Как сделать, чтобы картинка увеличивалась при наведении курсора? При этом, картинка должна наплывать на рядом стоящие в определённом направлении. А так же нужно чтобы под картинкой можно было создать строку текста. Вобщем - пример на фoто.
Может кто знает сайт, на котором используется такой принцип. ВАЖНО! Скрипт должен работать на всех браузерах, включая IE.

Спасибо за помощь.

[Владимир75]

Для каждой cms   cуществуют свои модули и плагины, поэтому решение стоит искать у разработчиков cms.

[pavlik1997]

Вы можете использовать CSS и JavaScript для создания такого эффекта на своем веб-сайте. Вот пример кода, который вы можете использовать:

HTML:
```
<div class="container">
  <div class="image-container">
    <img src="your-image.jpg" alt="Image" class="image">
    <div class="overlay">
      <p class="text">Your text here</p>
    </div>
  </div>
</div>
```

CSS:
```
.container {
  position: relative;
  width: 300px;
  height: 200px;
}

.image-container {
  position: relative;
  overflow: hidden;
}

.image {
  width: 100%;
  height: auto;
  transition: transform 0.3s;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.text {
  font-size: 18px;
  text-align: center;
}

.image-container:hover .image {
  transform: scale(1.2);
}

.image-container:hover .overlay {
  opacity: 1;
}
```

JavaScript (для поддержки IE):
```
const imageContainers = dоcument.querySelectorAll('.image-container');

Array.from(imageContainers).forEach(container => {
  container.addEventListener('mouseenter', () => {
    container.querySelector('.image').style.transform = 'scale(1.2)';
    container.querySelector('.overlay').style.opacity = '1';
  });

  container.addEventListener('mouseleave', () => {
    container.querySelector('.image').style.transform = 'scale(1)';
    container.querySelector('.overlay').style.opacity = '0';
  });
});
```

Этот код создает контейнер изображения с наложенным текстом. При наведении курсора на контейнер, изображение увеличивается в размере и наложенный текст становится видимым. Эффект применяется с использованием CSS-переходов, а JavaScript добавлен для поддержки IE и установки стилей при наведении.

Чтобы использовать этот код, замените `your-image.jpg` на URL-адрес вашего изображения и `Your text here` на желаемый текст.

вот еще один пример, где картинка увеличивается при наведении курсора и перемещается в определенном направлении:

HTML:
```
<div class="container">
  <div class="image-container">
    <img src="your-image.jpg" alt="Image" class="image">
    <div class="overlay">
      <p class="text">Your text here</p>
    </div>
  </div>
</div>
```

CSS:
```
.container {
  position: relative;
}

.image-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin: 10px;
}

.image {
  width: 200px;
  height: 150px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s, transform 0.3s;
}

.text {
  font-size: 16px;
}

.image-container:hover .image {
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.image-container:hover .overlay {
  opacity: 1;
  transform: translateY(0);
}
```

JavaScript:
```
// Нет необходимости в JavaScript для этого примера.
```

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

Просто замените `your-image.jpg` на URL вашего изображения и `Your text here` на желаемый текст. Вы также можете настроить размеры, цвета и другие свойства, чтобы соответствовать вашим требованиям.

Посмотрите тут, вроде как то самое _http://ruseller.com/adds.php?rub=34&id=2277

[Donovan]

Посмотрите тут, вроде как то самое _http://ruseller.com/adds.php?rub=34&id=2277

Спасибо. Не плохой вариант. Добавлю себе в заметки!