Как сделать увеличивающуюся картинку?

Question

[other_letter]

Сейчас пользуюсь конструкцией:

<a href="#" onmouseover="showLinkImage('float_1')" onmouseout="hideLinkImage('float_1')"> <img src="pictures/1l.jpg" width="90%" > </a>
      <div id="float_1" style="display: none; position: absolute;">
        <img src="pictures/1.jpg" width="130%" />

Всё работает.
Не устраивает то, что картинка увеличивается вниз и вправо. То есть у меня исходная картинка в середине, но ближе к правой части. Увеличенная получается ниже и правее, что при некоторых размерах иногда выводит часть картинки за экран.

Как сделать иначе?

Answer 1

[Андрей Саныч]

что-то всего такого непонятного понаписывали. Вот jsfiddle.net/oav64mje

Comments

[other_letter]

Да, так мне видится проще.
Увы, есть тот же эффект - даже первая (маленькая) картинка располагается ниже - видимо, так, чтобы хватило места для увеличения. Если всю конструкцию сменить на простое отображение картинки - всё ОК.
Можно как-то пофиксить?

Answer 2

[abcfont]

на CSS - pavlyukpetr.com/awesome

Answer 3

[Андрей Федоров]

зачем тут js совсем не понятно.

у css есть псевдокласс :hover, вы можете навесить на него любые стили и увеличивать картинку как угодно, в то числе и анимировано.

codepen.io/aliencash/pen/eNzPKy

Comments

[other_letter]

но ведь это коснётся всех картинок со ссылками?

[Андрей Федоров]

сделал, чтобы было только для этой. посмотрите еще.

[other_letter]

Спасибо за внимание. Но начался какой-то ужас. Картинка работает как и хотелось (было бы здорово, если бы увеличивалась в направлении центра экрана, но и так здорово). Но появилась вторая - справа от неё. Большая. В полэкрана.
Не могу показать, увы... Это корпоративный внутренний ресурс.

[other_letter]

Ага... Убираю (полностью див) и всё практически как надо. Не понимаю зачем он был нужен, ибо работает, вроде, как надо.
Отчего-то сползла картинка ниже, на пару-тройку строчек... Некрасиво... Ковыряю что ей не нравится.

[Андрей Федоров]

div нужен чтобы показать особенности размещение остального контента на странице.
От чего сползла у вас не могу сказать. Смотрите внимательно, что делали, что меняли...

[other_letter]

Кажется, понятно... Картинка заранее занимает позицию, чтобы в увеличенном виде не скрываться выше. Вы не подскажите как сделать, чтобы её увеличение было справа-сверху влево-вниз?

[Андрей Федоров]

Так она и так во все стороны увеличивается.