Эффект при наведении курсора

[DarkSPN]

Подскажите, как реализовать эффект подъема картинки при наведении курсором, как в примере http://starmedia.by/ на иноках Сайты - Интернет-магазины - Landing page - и т.д.

[gladiolus0707]

Первое что пришло в голову это с помощью управляемого изображения если не ошибаюсь, если нет, то с помощью событий.

[anonimus]

такие вещи делают при помощи стилей, но никак не событиями

[gladiolus0707]

С помощью событий тоже можно

[anonimus]

можно, но зачем усложнять?

[gladiolus0707]

Ну я предложил, кому как проще.

[Gudwinn]

Вообще то именно в билдере идентичные вещи делаются с помощью управляемого текста)))

[gladiolus0707]

А управляемое изображение разве такого не даст?

[anonimus]

Вообще то именно в билдере идентичные вещи делаются с помощью управляемого текста)))

подпрыгивающая картинка с помощью управляемого текста?

[Gudwinn]

Сорри не дочитал, на сайт глянул, и бросилось в глаза именно примеры работ))) А просто приподнятие иконки можно наверное даже несколькими вариантами воплотить, но как и говорил гладиолус, начинающим с помощью событий реализовать такое будет быстрее и проще.

[anonimus]

хотя хозяин барин

кстати, если например сделать страничку и на ней пару элементов с эффектом сдвига через css и например весом 70кб
то точно такая же страничка на событиях будет весить примерно 170кб

и если ко всему остальному так подходить, то готовый сайт будет весить раза в 3 больше, чем мог бы

[DarkSPN]

Спасибо за ответы. Но именно такого эффекта в редакторе достичь не получилось. Пробовал через события при наведении с анимацией и обратно, этой анимации нет. Пол дела сделал в разделе CSS3 Анимация - раздел переходы, триггер-hover, дальше magrin-top и значение ниже, но в обратную сторону не знаю как реализовать. Нашел решение через стили http://ruseller.com/lessons/les1090/demo/demo_1.html , если кому понадобиться.

[Gudwinn]

а что сложного, на наведение мыши анимировать вверх на значение -10px от текущего (допустим текущая позиция картинки 240 px от верха, значит впишем 230px) и на onmouseout анимировать обратно: (вписываем снова 240px)? ))) А то все блещем знаниями, а поэтапное решение не выкладываем))) Кстати поигрался с управ. изображением, и прям тютелька в тютельку требуемого эффекта не добился. Если надо, готовые стили скину, при которых слою в котором картинка надо класс присвоить будет.

[DarkSPN]

Спасибо! Отличное решение! Все сделалось только двумя событиями.

[igorweb]

буквально вчера выложил проект с таким эффектом. Делается все проще. На триггер hover назначаете margin-top, значение ставите, к примеру, -10px. А в свойствах html во вкладку "Особый стиль" вставляете код:

Код: Выделить всё

-webkit-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear;


Отправлено спустя 56 минут 43 секунды:
Забыл сказать: код предоставлен в одной из тем Gudwinn-ом, за что ему еще раз отдельное спасибо. Без этого кода объект резко возвращается обратно.