Изображение прокрутки вверх

Я пытаюсь создать набор кнопок социальных сетей, которые прокручиваются вверх при наведении указателя мыши.Изображение прокрутки вверх

Изображения 145px в ширину и 290px в высоту. Мне нужно только 145px в высоту, показанное так, что когда изображение зависнет, перекрашенное изображение (оставшаяся высота 145px) подталкивает оригинал вверх (переполнение будет скрыто, я предполагаю).

Я знаю, что это как-то связано с переходами и переводит свойства, но я не могу сказать, что мне нужно делать.

Может кто-нибудь помочь?

Я бы предпочел сохранить его в CSS или HTML, если решение jQuery довольно простое.

Спасибо.

Пример изображения http://i.imgur.com/X8PyBPp.png

источник

2015-02-19 Michael Duker

Вы имеете в виду ** ** спрайтов, и вам нужно будет использовать 'фон-position' для тех. Не нужно устанавливать переполнение в скрытое, так как это будет фоновое изображение. И анимация не должна быть проблемой с переходом css. Покажите нам какой-нибудь код, и я буду рад помочь! – Pevara

Я рекомендую Fontastic в эти дни вместо спрайтов. Он прост в использовании, вы получаете больше гибкости стилизации, чем спрайты и значки, отображаемые на более высоком уровне качества. http://fontastic.me/ – Coop

Очень базовая реализация с HTML и CSS только, фон толкают с переходом.

div { 
 
    height: 145px; 
 
    width: 145px; 
 
    transition: background 1s ease; 
 
    background: url("http://i.imgur.com/X8PyBPp.png") no-repeat left top; 
 
} 
 
div:hover { 
 
    background-position: left bottom; 
 
    cursor: pointer; 
 
}

<div></div>

источник

2015-02-19 17:57:07 MMachinegun

Thankyou очень много! –

Изображение прокрутки вверх

ответ

Смежные вопросы