Jump to content
  • 0
Sign in to follow this  
Сугнияр Тукач

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

Question

Хочу сделать эффект, чтобы картинка при наведении курсора плавно увеличивалась из центра, но при этом оставалась внутри фрейма. Пытался сначала сделать это виджетом "state transition button": картинку сделал размером 500 на 444, поставил заливкой во фрейм 300 на 337, в стандартном состоянии поставил режим "заполнение", а при наведении курсора - "исходный размер". Но получилось не увеличение, а какое-то уродливое моргание.

Потом нашёл в похожем топике такой вод код:

<style type="text/css">
html { overflow-x: hidden; }
body { overflow-x: hidden; }
</style>

<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;

}
  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>

Если я правильно его скопировал — как привязать класс к нужному элементу? Прописывал в "гиперссылки" нечто вроде "class img.myclass" или ".img.myclass", но это не работало.

Share this post


Link to post

15 answers to this question

Recommended Posts

  • 0

Создайте класс
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./applications/core/interface/imageproxy/imageproxy.php?img=http%3A%2F%2Fdl1.joxi.net%2Fdrive%2F0008%2F0401%2F545169%2F160314%2Fd281ea0cf1.png&key=1db7ce31f8552bc309ca8edb6e1560e9761f2e84e26388fd32cab5842d5fb876">
Примените к нужному объекту
ce150013a1.png

Share this post


Link to post

Новая статья

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

Не работает. Сделал в точности то, что вы описали.

Я вам описал как класс создавать. А то что не работает -  это уже в коде дело.

Share this post


Link to post
  • 0

Если просто нужно увеличение, пишите название класса так myclass. Из кода удалите img
И вот это не нужно и даже вредно
 

<style type="text/css">
html { overflow-x: hidden; }
body { overflow-x: hidden; }
</style>

И кстати, ваш код не от цента увеличивает, а от верха.
Вот этот код от центра будет
 

<style>
	    
			.imgmyclass{
				-webkit-transition: all .5s ease .0s;
				-moz-transition: all .5s ease .0s;
				-o-transition: all .5s ease .0s;
				transition: all .5s ease .0s;
				-ms-transform-origin: 50% 50%;
				-webkit-transform-origin: 50% 50%;
				transform-origin: 50% 50%;
			}

			.imgmyclass:hover{
				-webkit-transform: scale(1.5);
				-moz-transform: scale(1.5);
				-ms-transform: scale(1.5);
				transform: scale(1.5);
				-webkit-transition: all .5s ease .0s;
				-moz-transition: all .5s ease .0s;
				-o-transition: all .5s ease .0s;
				transition: all .5s ease .0s;
			}

		</style>

Share this post


Link to post
  • 0

Теперь заработало!

Но это ещё не все. Нужно, чтобы увеличивалась заливка внутри фрейма, а не сам фрейм с картинкой, как сейчас:

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./monthly_2016_03/zoom.jpg.4420655f139b65be434fb0ef5ff2c528.jpg" style="height:500px;" alt="zoom.jpg.4420655f139b65be434fb0ef5ff2c52">

Share this post


Link to post
  • 0

Добавил ещё правило -overflow:hidden, оно вроде должно отвечать за то, чтобы изображение не выезжало за рамки блока, но ничего не поменялось.

Share this post


Link to post
  • 0
11 минуту назад, Сугнияр Тукач сказал:

Но это ещё не все. Нужно, чтобы увеличивалась заливка внутри фрейма, а не сам фрейм с картинкой, как сейчас:

Размещаете изображение, не прямоугольник залитый изображением, а именно изображение. В тот код который я дал подставляете не класс (класс вообще создавать не надо), а ID изображения. Он должен быть вида #u219_img. (у Вас цифры другие будут)

 

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

overflow:hidden - это скрытие скроллинга. Не имеет никакого отношения

Share this post


Link to post
  • 0

С идентификатором всё заработало, а если перетащить изображение в композицию или кнопку состояния - перестаёт. 

Может, есть какой-нибудь способ с классами? Они хотя бы работали внутри кнопки состояния.

Share this post


Link to post
  • 0
18 минуту назад, Сугнияр Тукач сказал:

С идентификатором всё заработало, а если перетащить изображение в композицию или кнопку состояния - перестаёт. 

Может, есть какой-нибудь способ с классами? Они хотя бы работали внутри кнопки состояния.

С классами вариантов нет. Я не знаю почему у вас перестает работать. В конце концов можете разместить внутри кнопки, а потом посмотреть ID.
У меня всё продолжает работать при перетаскивании:
В композицию
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./applications/core/interface/imageproxy/imageproxy.php?img=http%3A%2F%2Fdl1.joxi.net%2Fdrive%2F0008%2F0401%2F545169%2F160314%2F8e4f40fce5.gif&key=0fa2f1420d988d145afd52d3291d4ed65667c2e99309cc8060e1305d0ed1005a">

в кнопку состояния
5c132e6155.gif

Share this post


Link to post
  • 0

Спасибо за информацию, пол дня по инету искал нужный ответ. Как я понял, нужно вставлять такой кусок в <style>...</style> для каждой картинки или их ID можно как-то в одном месте указать?

Share this post


Link to post
  • 0
<style type="text/css">
	    
			#u158_img, #u166_img{
				-webkit-transition: all .5s ease .0s;
				-moz-transition: all .5s ease .0s;
				-o-transition: all .5s ease .0s;
				transition: all .5s ease .0s;
				-ms-transform-origin: 50% 50%;
				-webkit-transform-origin: 50% 50%;
				transform-origin: 50% 50%;
			}

			#u158_img, #u166_img:hover{
				-webkit-transform: scale(1.05);
				-moz-transform: scale(1.05);
				-ms-transform: scale(1.05);
				transform: scale(1.05);
				-webkit-transition: all .5s ease .0s;
				-moz-transition: all .5s ease .0s;
				-o-transition: all .5s ease .0s;
				transition: all .5s ease .0s;
			}

		</style>

сделал, как вы написали, в итоге работает только на последнее, указанное по ID изображение

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...