Как правильно использовать transform(translateX):hover?

Question

[onahapa]

При движении мышки в области применения transform(translateX), картинка возвращается назад, как решить эту проблему?

.music-image > img {
    position: absolute;
    border: 10px solid #fff;
    z-index: 2;
    transition: 0.5s;
}

.music-image:hover > img {
    transform: translateX(-100px);
}

Comments

[Юрий Лобанов]

Код приведите кодом, зачем заставлять перепечатывать?

Answer 1

[Евгений Петров]

У вас прыжки происходят по причине того, что вы картинка выпадает из нормального потока и её размеры контейнер не учитывает. Из этого следует вывод, что как только курсор уходит из области картинки, у контейнера div.music-image исчезает псевдокласс :hover.

Короче, вот примерно так jsfiddle.net/petroveg/L77JW/.

Comments

[podvzbzdnul]

отлично

[onahapa]

и в самом деле, отлично, только теперь я ничего не понимаю :D почему это работает

[Евгений Петров]

Я делаю уличную магию. Особую. Хотите увидеть немного магии?

[Евгений Петров]

Если серьёзно, то у вас высота блока div.music-image была 0. Наведение срабатывало на картинке. И как только картинка уезжала из-под курсора, псевдокласс :hover слетал с этого блока. Картинка ехала назад. И так по кругу.

[onahapa]

@Petroveg, мне кажется или если бы я изначально написал
.music:hover .music-image{
transform:translateX(-100px);
}
то все бы сработало?)

[Евгений Петров]

@onahapa работало бы только для области блока .music.

В вашем примере не хватает оформления блока .music и блока .music-button с маленькими картинками. Без этих пропущенных стилей высота:

.music = .music-button ~110 пикселей
.music-image 0 пикселей
.music-image img 200 пикселей

Это значит, что на нижней части большой картинки (примерно 90 оставшихся пикселей) вы наблюдали бы точно такой же эффект дёргания.

[onahapa]

@Petroveg почистил немного Ваш css jsfiddle.net/onahapa/474g8 . Насчет высоты не все ясно. Извините конечно, но где вы её указываете, ну то есть, в моем примере её нет и все работает

[Евгений Петров]

@onahapa вы взяли мой пример и спрашиваете, почему у вас не работало?))) Объясню ещё раз: у вас большая картинка была с position:absolute, а у меня она в нормальном потоке. Поэтому в моём примере высота общего контейнера определяется высотой большой картинки, а у вас она не влияла на контейнер никак. Ясно?

Почистили, говорите?)) Вот за такое надо руки рубить:

* {
    font-family: sans-serif;
    margin: 0;
    padding: 0;   
}

[onahapa]

@Petroveg это редактор так настроен). Говоря в моем примере, я имел ввиду, Ваш пример "почищенный")). Теперь я вас понял =) именно это мне было не понятно, я про pos:ab. А за чем так сильно бить по рукам, за такое?

[Евгений Петров]

@onahapa да, по рукам не надо, вы правы. Руки ещё пригодятся. Лучше на кол. А бить надо по многим причинам:

— нагружает браузер понапрасну
— для шрифта убивает наследование
— затрудняет применение сторонних плагинов, модулей

[onahapa]

@Petroveg еще раз спасибо за Ваши ответы =)

[massef]

Евгений Петров onahapa Это ведь можно было сделать и без transform, обычным смещением через left. Но мне интересно другое, что будет производительней в данном случае, двигать через transform или position?

[Евгений Петров]

massef: безусловно, transforn3d будет быстрее.

Answer 2

[Юрий Лобанов]

Или

.music-image:hover > img {
     transform: translateX(-100px);
}

Или приведите код кодом.

Comments

[onahapa]

К сожалению не помогло

Answer 3

[podvzbzdnul]

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

Comments

[onahapa]

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

[onahapa]

А нет, все спасибо =). Почему то когда отдельно определял стиль для картинки, выходило так, как я говорил, переписал все, заработало %)

[podvzbzdnul]

@onahapa тогда попробуйте рисовать рамку у изображения - jsfiddle.net/podvzbzdnul/492AR/3
или я не совсем понял?

[podvzbzdnul]

@onahapa ok=)

[onahapa]

@podvzbzdnul наткнулся на проблему. Под картинкой(200х200), 2 картинки, которые должны быть ссылками. В итоге получается так, что из-за размера в 300рх и z-indexa 2, ссылки так и остаются под div-ов, и остаются не кликабельными.

[podvzbzdnul]

@onahapa упс, недоглядел, извините