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
здравствуйте.
картинка увеличивается не плавно, а моментально. подскажите, в чем проблема.
спасибо
здравствуйте.
картинка увеличивается не плавно, а моментально. подскажите, в чем проблема.
спасибо
Здравствуйте.
Очевидно, вы вставили код с ошибкой. Что-то конкретнее можно будет сказать, если покажете ссылку на ваш тестовый сайт.

Привет, подскажите пожалуйста можно ли сделать чтобы при наведении на передний план фотка выпрыгивала? и от чего зависит качество фотки, такое ощущение что замылено качество . И еще вопрос, можно ли на мобильной версии убрать этот эффект, делаю через точку остановки . 
Привет, подскажите пожалуйста можно ли сделать чтобы при наведении на передний план фотка выпрыгивала? и от чего зависит качество фотки, такое ощущение что замылено качество . И еще вопрос, можно ли на мобильной версии убрать этот эффект, делаю через точку остановки . 
Привет.
Чтобы каждая из фоток всегда при увеличении была поверх всех, потребуется написать javascript, т.е. только при помощи css не сделать. Я бы вам тут порекомендовал лучше применить первый способ, чтобы картинка увеличивалась внутри своего контейнера, а не поверх его.
Если вы имеете в виду, что при увеличении качество картинки меняется, то это естественно, ведь изначальный размер у неё меньше. Чтобы было не так заметно ухудшение качества, попробуйте сделать изображения в формате png, и немного уменьшить коэффициент масштабирования.

Да, показать или отключить только на конкретной точке (точках) остановки конечно можно. В css это называется "медиа-запросы". Рекомендую почитать учебники об этом в сети.
Например, для вашего случая это могло бы выглядеть примерно так (ваш css-код будет работать только при ширине экрана болеее 768px):
<style>
@media
screen and (min-width:768px){
.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>
Обновлено 22 Сен 2018, 10:43
Спасибо, большое. Буду пробовать


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