CODEWITHSUNDEEP
wordpresshover
ProfFrnswrth
ProfFrnswrth

Reputation: 115

Wordpress hover over image

I am trying to create a hover over image from a single split PNG

enter image description here

How do I enable it so when the image is not hovered over, the top image will view, but when they hover over, the bottom one will show.

Upvotes: 0

Views: 175

Answers (2)

Matthias Hauert
Matthias Hauert

Reputation: 107

The technique you are asking for is called "CSS-Sprites". Here's a tutorial

It uses the background-position style. For the default state of your element, just set the image as background. Note that you need a fixed height (half the height of your sprite) to hide the second part of the image. You also need a width, because your button will contain no content, just a background. For the hover state, use a negative 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;
}

This means the image is moved up so the top icon in there is above the visible area of your button.

Upvotes: 2

Tan
Tan

Reputation: 2178

Try to make sprites there is many applications out there. Google Css sprites generator. Or try this one its free http://csssprites.com. Then its just simple css or jquery if u want any effects.

Upvotes: 0

Related Questions