I’ve partially redesigned my website http://aaronstone.co.cc/. And I just wanted to fix the odd-looking transitioning effect (using -webkit-transition) on the header image. When it’s hovered upon, the effect works out well: the width smoothly increases and the image is replaced with another one with a glowing dot and two angle brackets on either side.
The problem is that when the mouse is moved away, I want the width to decrease smoothly and the new header image to fade back to the old header image, and the old header image should shift back to it’s original place.
Since I’m using sprites and Chris’ recent article’s ( How to fade one image into another [using sprites] ) tips to do this, I have to use background-position while changing both the x-coordinate and y-coordinate values. Now, I want the y-coordinate value to jerk back to it’s original (thus bringing the original image header back instantly) but I want the x-coordinate to smooth back to it’s original.
How do I achieve this? I’ve tried using -webkit-transition to transition background-position-x to it’s original. But then, background-position-x is not supported by Chrome and even isn’t in accord with W3C.
Thanks!
Note: I haven’t optimized images yet, so on slow internet connections, the header image may take some time to load.
Note 2: I prefer a CSS only solution rather than one that involves Javascript (or jQuery)
