CSS3 background image position transition

Question

I want a CSS3 hover effect on my website's logo. Easy, right? Well it works, but not the way I want it to.

Link to my logo

The top half of it is the regular state and the bottom half is the :hover state.

I have the standard CSS for changing the background position on :hover, but the CSS3 transition slides the image up and down with the position. Instead, I want it to simply fade in and out to the new position.

Is this possible when working with one image and two positions or will I have to make two separate images (which isn't happening)?

Answer 1

You don't need two separate images, but you do need two separate elements in which to position your logo.

See live version here: http://jsfiddle.net/BdY79/

.logo {
  width: 282px;
  height: 69px;
  background: #fff url(http://scferg.com/wp-content/themes/austere/images/logo.png) 0 -69px no-repeat;
  overflow: hidden;
}

.logo img {
  background-color: #fff;
  -webkit-transition: opacity 200ms ease;
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
}

.logo img:hover {
  opacity: 0;
}

In practice, you probably want to link your logo and you can use the tag to do this, so there's no extra markup. It also degrades gracefully.

Answer 2

This does not mention the background position animation...

.box {
    display:block;
    height:300px;
    width:300px;
    background:url('http://lorempixum.com/300/300') no-repeat;
    background-position:-300px;
    -webkit-transition:background-position 1s ease;
}

.box:hover{
    background-position:0px;
}

Webkit only :(

Via: http://jsfiddle.net/hfXSs/

More here: http://css-tricks.com/parallax-background-css3/