cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

After seeing this site http://fitzfitzpatrick.com/ 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, may i use it?

  4. 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.

  5. that's gorgeous

  6. very smooth !

  7. This. Is. Amazing. Great job!

  8. amazing work :)

  9. 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 :(

  10. 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...

  11. 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 :)

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

  13. Here is a POC for CSS only, although not as feature rich of course: http://codepen.io/Merri/full/ybHau

  14. 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!

  15. @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.

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

  17. 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 :)

  18. 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!!!

  19. This is really cool!

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

  21. Amazing! Great job.

  22. 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 ...

  23. 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.

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

You must be logged in to comment.