Wordpress наведите курсор мыши на изображение

Question

Я пытаюсь создать парить над изображением из одного раскола PNG

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

Answer 1

Техника, которую вы просите, называется «CSS-Sprites». Вот tutorial

Он использует стиль background-position. Для состояния вашего элемента по умолчанию просто установите изображение в качестве фона. Обратите внимание, что вам нужна фиксированная высота (половина высоты вашего спрайта), чтобы скрыть вторую часть изображения. Вам также нужна ширина, потому что ваша кнопка не будет содержать контент, а только фон. Для состояния парения, используйте отрицательное background-position:

.button-foo{ 
    display: block; 
    height: 29px; 
    width: 110px; 
    background: url("http://i.imgur.com/sJu5vvo.png") no-repeat scroll left top transparent; 
} 

.button-foo:hover{ 
    background-position: 0 -29px; 
} 

Это означает, что изображение перемещается вверх, верхний значок там выше видимой области вашей кнопки.

Answer 2

Попробуйте сделать спрайты, там много приложений. Генератор спрайтов Google Css. Или попробуйте один из его бесплатных http://csssprites.com. Тогда его просто css или jquery, если вы хотите каких-либо эффектов.