Jump to content
  • 0
Sign in to follow this  
artem_wrong

Как сделать: увеличение при наведении курсора

Question

artem_wrong    13

я уже читал ети темы:

в основном решение - копаться в коде. вот новая версия только что вышла - может в ней нашлось что-то подобное? чтобы при наведение курсора картиинка НЕМНОГО  увеличивалась, т е при размере 300px - 200px примерно до 340px - 230px.  пока вижу только одно решение - сделать обчный  фрейм с заливкой картинки, которая по краям имет белую (прозрачную) рамку и в состоянии "Наведение курсора" вставить такую же картинку, но уже без рамки

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0
15 минуту назад, artem_wrong сказал:

в основном решение - копаться в коде. вот новая версия только что вышла - может в ней нашлось что-то подобное? чтобы при наведение курсора картиинка НЕМНОГО  увеличивалась, т е при размере 300px - 200px примерно до 340px - 230px.  пока вижу только одно решение - сделать обчный  фрейм с заливкой картинки, которая по краям имет белую (прозрачную) рамку и в состоянии "Наведение курсора" вставить такую же картинку, но уже без рамки

Можно и так.
Есть еще другой вариант (увеличение только в ширину или в высоту)
В стандартном состоянии заливка по размеру, в состоянии курсор над кнопкой заливка заполнение.
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.a54875cbf6.png

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0
artem_wrong    13

так скорее будет еффект зума, а не увеличения картинки

подсмотрел тут в других местах, в свойствах страницы в head вставляется код

<style type="text/css">
.myclass {
	 overflow:hidden !important;
	 width:294px;
 }

  img.myclass{
    -moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	-webkit-transition: all 1s ease-out;
	-webkit-transform-origin:center !important;
	-moz-transform-origin:center !important;
	-ms-transform-origin:center !important;
	-o-transform-origin:center !important;
	transform-origin:center !important;

}
  img.myclass:hover {
     -webkit-transform: scale(1.5)  translate(-30px);
     -moz-transform: scale(1.5)  translate(-30px);
     -o-transform: scale(1.5)  translate(-30px);
    transform: scale(1.5)  translate(-30px);
}
</style>

 а потом создавать не блоки с заливкой  картинки,  а HTML-обьект с кодом

<div align=center><img class="myclass" width="294" height="307" alt="Картинка1" src="assets/1.jpg" align=center></div>

где вместо Картинка1 прописываешь имя файла из Ресурсов, и подставляешь свои значения ширины и высоты

В коде HEAD меняются значения, до каких пор будет увеличиваться картинка (1.5, 1.3 и т д), а также сколько секунд будет выполняться еффект увеличения (1s, 0.5s и т д)

Share this post


Link to post
  • 0
artem_wrong    13

только увеличение происходит влево-вниз. надо  еще придумать, как бы растягивалось во все стороны равномерно

Share this post


Link to post
  • 0
artem_wrong    13

по  поводу  того, чтобы расползалось равномерно от центра - просто во всех значениях translate ставим в скобках 0px

единственный минус такого метода - когда работаешь в Muse, то вместо картинок будут изображены фреймы с HTML-обьектом, просмотр которого будет недоступен в режиме редактирования

Share this post


Link to post
  • 0
5 часов назад, artem_wrong сказал:

единственный минус такого метода - когда работаешь в Muse, то вместо картинок будут изображены фреймы с HTML-обьектом, просмотр которого будет недоступен в режиме редактирования

Из этого кода вполне можно виджет сделать и тогда всё будет видно

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...