Как создать эффект Zoom на изображении с JS?

Question

Здравствуйте, у меня есть сайт с Drupal 8, и я хочу, чтобы, когда пользователь переворачивает свою мышь или перемещает свое изображение на изображение, появляется увеличение. Точно так же, как в примере ниже. См. Эффект «Внутреннее увеличение»:

http://www.starplugins.com/cloudzoom/examples

У меня есть тема Botstrap 3. В идеале изображение должно отображаться на странице в формате и разрешении, определенных в Drupal 8, и что при наведении курсора или касании изображения оно будет увеличено в формате и исходном разрешении.

Как это сделать ? Спасибо.

Answer 1

Я надеюсь, что вы ищете что-то подобное. Кстати, нет смысла использовать js для такого экземпляра. Вы можете просто получить его, используя приведенный ниже код css.

img {   height: 100px;   width: 100px;   max-width: 120px;  
-webkit-transform: scale(1);   -moz-transform: scale(1);   -ms-transform: scale(1);   -o-transform: scale(1);   transform: scale(1);   webkit-transition: all 0.5s ease-out;   -moz-transition: all 0.5s ease-out;   -ms-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;   transition: all 0.5s ease-out; }

Скажите, что ваше изображение находится внутри элемента div, а используемый класс - box. И вы хотите получить эффекты масштабирования. Затем вы можете go вперед, используя приведенный ниже код.

.box:hover {
  /* background: #0088E0; */
  -webkit-box-shadow: 0px 16px 20px 0px rgba(216, 216, 216, 0.75);
  -moz-box-shadow: 0px 16px 20px 0px rgba(216, 216, 216, 0.75);
  /* box-shadow: 0px 16px 20px 0px rgba(216, 216, 216, 0.75); */
  box-shadow: 0 16px 20px 0 rgb(2,138,69);
}

.box:hover .icon img {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}