0
Заголовок темы

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

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

Способ 1: увеличение картинки внутри блока

1. Помещаем картинку на рабочий холст
2. Задаем картинке любой вымышленный стиль графики:
 
Добавляем класс через стиль графики в Adobe Muse

3. Переходим в свойства страницы и добавляем в секцию head код:

<style>
.zoom img{
-webkit-transition:all 1s linear 0s;
-moz-transition:all 1s linear 0s;
-o-transition:all 1s linear 0s;
transition:all 1s linear 0s;
-webkit-transform-origin:center !important;
-moz-transform-origin:center !important;
-ms-transform-origin:center !important;
-o-transform-origin:center !important;
transform-origin:center !important;
}
.zoom:hover img{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);
transform:scale(1.1);
}
</style>


Пример размещения кода:
 
Как вставить css-код в Adobe Muse

где значение 1s (1 секунда) отвечает за плавность эффекта, а  (1.1) отвечает за коэффициент увеличения (2 - в два раза), ну и zoom - это классс (стиль графики, который мы задали ранее)
В результате получаем эффект, когда происходит увеличение картинки внутри своего блока:
 


Способ 2: увеличение картинки в размерах

Для этого проделаем те-же шаги, что и в первом случае, но вставим код немного другой:

<style>
.zoom {
-webkit-transition:all 1s linear 0s;
-moz-transition:all 1s linear 0s;
-o-transition:all 1s linear 0s;
transition:all 1s linear 0s;
-webkit-transform-origin:center !important;
-moz-transform-origin:center !important;
-ms-transform-origin:center !important;
-o-transform-origin:center !important;
transform-origin:center !important;
}
.zoom:hover {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);
transform:scale(1.1);
}
</style>


Получаем результат плавного увеличения картинки в размерах:
Чтобы задать один и тот-же эффект нескольким картинкам, просто назначьте им всем этот-же стиль графики.
Обновлено 3 Янв 2017, 11:54
можно поигратся с выцветанием ,стандартное и курсор над кнопкой
 
Код приведен одинаковый в двух местах.
Можно ли исправить нижний код, никак не могу добиться нужного эффекта?
Обновлено 2 Янв 2017, 11:46
Код приведен одинаковый в двух местах.
Можно ли исправить нижний код, никак не могу добиться нужного эффекта?
Исправил. Спасибо, что заметили ошибку.
При 1м скрипте увеличиваются ВСЕ картинки на странице:)При 2м увеличивается ВООБЩЕ ВСЕ:) Может что не так делаю?:)
Все, разобрался.
Я пытался применить скрипт к уже существующим картинкам на сайте:)
Вобщем, добавил новую, к ней стиль графики, потом этот стиль к нужным картинкам.Все работает:)
Автору респект огромный, без танцев с бубном и сторонних виджетов суперский эффект!yes
здравствуйте.
картинка увеличивается не плавно, а моментально. подскажите, в чем проблема.
спасибо
здравствуйте.
картинка увеличивается не плавно, а моментально. подскажите, в чем проблема.
спасибо
Здравствуйте.
Очевидно, вы вставили код с ошибкой. Что-то конкретнее можно будет сказать, если покажете ссылку на ваш тестовый сайт.
Есть готовый видж на основе данного кода, + добавлено куча разных плюшек!
Не портит качество изображения при увеличении

Качаем виджет https://webgeek.site/quick-zoom | видж полностью бесплатный, не имеет привязок к домену срок действия не ограничен. Работает с 15 версии Muse.
 
Обновлено 29 Дек 2017, 23:14


Сообщение
Ник *
Ваш e-mail *
 
Мувилаб рекомендует: быстрый хостинг с защитой от DDos атак!