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

[Сугнияр Тукач 2]

Хочу сделать эффект, чтобы картинка при наведении курсора плавно увеличивалась из центра, но при этом оставалась внутри фрейма. Пытался сначала сделать это виджетом "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", но это не работало.

[Павел Хомерики 3360]

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

[Сугнияр Тукач 2]

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

[Павел Хомерики 3360]

1 час назад, Сугнияр Тукач сказал:

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

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

[Павел Хомерики 3360]

Если просто нужно увеличение, пишите название класса так 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>

[Сугнияр Тукач 2]

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

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

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

[Сугнияр Тукач 2]

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

[Павел Хомерики 3360]

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

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

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

 

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

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

[Сугнияр Тукач 2]

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

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

[Павел Хомерики 3360]

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

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

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

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

в кнопку состояния

[Сугнияр Тукач 2]

Да, это я затупил - сначала нужно было картинку поместить куда надо, а потом уже айди смотреть)

Спасибо, Вы очень помогли. 

[Виталий Осипов 0]

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

[Павел Хомерики 3360]

Перечислите id через запятую ( в английской раскладке) и пробел

[Виталий Осипов 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 изображение

[Алексей Чувелев Greymouse2 356]

не 

Цитата

#u158_img, #u166_img:hover{

а

Цитата

#u158_img:hover, #u166_img:hover{

[Виталий Осипов 0]

спасибо большое, ребят, очень помогли