Как заставить изображения перемещаться автоматически + при наведении курсора в CSS / HTML?

Question

Как заставить изображения перемещаться автоматически + при наведении курсора в CSS / HTML?

Например Эк Майн Аур Экк Ту Фильм

Answer 1

Это на самом деле очень легко сделать с помощью CSS3:

.moveMe
{
    width: 150px;
    height: 40px;
    background: #f01;
    position: absolute;
    top: 0;
    -webkit-transition: top 2s;
    -moz-transition: top 2s;
    -o-transition: top 2s;
}

.moveMe:hover
{
    top: 10px;
    -webkit-transition: top 0.3s;
    -moz-transition: top 0.3s;
    -o-transition: top 0.3s;
}

Это говорит элементу onHover о переходе между двумя состояниями top в течение 2 секунд и 0,3 секунды, когда мышь уходит.

Проверьте это здесь: http://jsfiddle.net/HGjQC/'

Поскольку это техника CSS3, код здесь будет работать только в браузерах webkit (Chrome, Safari, любой другой браузер, использующий движок Chromium [Rockmelt]]), Браузеры Opera и Mozilla.

Для IE, yoy, возможно, потребуется использовать Javascript, пока MS не решит реализовать больше CSS3.

Answer 2

Используется так называемый эффект параллакса.Я нашел плагин JQuery, который, кажется, помогает делать такого рода эффекты.Плагин называется Plax , вот демо 1004 *

Answer 3

вы можете сделать невидимый div, а затем использовать тег запроса .attr (), чтобы изменить изображение при наведении курсора. Я не уверен, что получу ваш вопрос, потому что не смог найти сайт, на котором хотел бы основать ваш.

Answer 4

Может быть, вы можете использовать JavaScript, например: http://jsfiddle.net/HGjQC/2/