user profile image

After seeing this site I decided to give a try to the "direction-aware hover effect". My first thought was to do it with a pure CSS, not too late I changed my mind and decided to use JS (I need to sleep anyway).

It's kind of simple, using JS we can easily detect the direction the cursor is coming, then, I am using CSS animations for each case (8 in total).


  1. So good, love it!

  2. Very smooth. Nice work :)

  3. Awesome!

  4. Awesome, may i use it?

  5. Wow that is amazing, really great work! I think you took the inspiration you got from the Fitz site and improved on it. Very cool.

  6. that's gorgeous

  7. Lovely.

  8. very smooth !

  9. This. Is. Amazing. Great job!

  10. amazing work :)

  11. This is great!

    Only thing I noticed is that when you hover closer to the right side of a box and move up and down, the box moves like it's coming from the right side, and not up and down. It makes a bigger difference when you make the boxes smaller (which is what I'm trying to use on my site). I don't know enough about CSS3 to try and fix it :(

  12. Quick question. I notice your html has no <> or </> in it... I am new to this and it is different than what I learned. I would love to use this for a site, but I don't know how to adapt it for squarespace...

  13. what if i wanna put anchor tag inside of info division,

    if i do remove pointer-events there is a unnamed bug inside can u tell me the fix

    and another bug we cant give position:relative to main container or wrapper...

    plz fix it asap :)

  14. Is this working ok on IE 10? because i tested this and it was broken. Or it's my problem? Anyone?

  15. Here is a POC for CSS only, although not as feature rich of course:

  16. Love this so much and am bummed... The in and out works, but it adds bottom to everything no matter which direction I am coming from. When it returns "d" it is always 2. Guh!

  17. @moseke i keep getting the same thing - i don't suppose you managed to find a way around this? I just keep getting "bottom" added rather than relevant directions :o( - Any help would be massively appreciated.

  18. Excellent animated example! looks great on mac using safari, thanks!

  19. Hi! Amazing work! :)

    I hope this is not too late, but if we want to give a relative position to the parent, especially if we have to scroll down ( d always returns 2 as said above), I managed to get it working by replacing :

    obj.offsetLeft by ( obj.getBoundingClientRect().left + window.pageXOffset ) obj.offsetTop by ( obj.getBoundingClientRect().top + window.pageYOffset)

    in the getDirection function. You have to keep the parenthesis or extract a variable in order to keep it clean. If we use jQuery, $obj.offset().left and $obj.offset().top also work.

    I hope it can help someone :)

  20. Buenos días, Noel. Me encanta tu animación, muchas gracias por tu trabajo y por hacerla posible!! Pero hay algo que no me queda bien y no sé cómo resolverlo: yo la he usado para imágenes de 240 de altura por 335 de ancho. Al no ser imágenes cuadradas, el valor de "perspective" no me sirve para ambos ejes, y cuando logro que en el eje horizontal se esconda toda la capa, en el eje vertical se queda parte de ella, y viceversa. ¿Cómo podría arreglarlo, hay alguna solución?? Me ayudarías mucho si pudieras darme una pista...gracias!!!

  21. This is really cool!

  22. when i copy this to my website it will not work any idea why this happens?

  23. Amazing! Great job.

  24. Nice....

  25. Mostafa @mostafaeslami7 on

    hi friend . thats awesoe but has bug . one that is sometimes get wrong about direction . two when you change the size ob boxes , bugs appears . its better to optimize that . its new concept its better to be without bug ...

  26. Nice Work

  27. Hi.. this is a great concept. surely can be used on many different ideas.

    But i have one reservation against this concept. It's not responsive to different browser screen size. Now i am not an expert in CSS.

    Does anyone have any idea how we can improve on this wonderful concept by making it responsive?

    Thanks in advance.

  28. Cool, but how about elements which are not square?

  29. How can we make it responsive ? Any idea

  30. Thank you! Love this script. I would recommend using "mouseenter" and "mouseleave" instead of "mousein" and "mouseout". Since the last two could fire multiple times when there are nested elements inside. Which will trigger hover animation to play many times instead of one.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.