CODEWITHSUNDEEP
firefoxcsscss-transitions
StuR
StuR

Reputation: 12238

CSS transition, through a negative top/left absolute position

http://jsfiddle.net/KgcM9/1/

I'd like to mouse over the <header> and the image transitions out through the top of the screen, and then reappears from the left of the screen back to the original position.

The problems with above fiddle are that if the mouse exits the <header>, the transition halts and the image returns from the top of the screen.

Also the transition moves the image first to x: -300, y: 400, so that it isn't visible, then it moves it x: 700, y: -1700 which is a complete hack so that it appears to be entering in from the bottom left corner.. any better ways to do this with CSS?

Upvotes: 0

Views: 1357

Answers (1)

jasssonpet
jasssonpet

Reputation: 2119

Not sure if this could help: http://jsfiddle.net/JyPXR/2/ Add overflow hidden and play with left/top coordinates.

Upvotes: 1

Related Questions