Mouse Direction Aware Hover Effects For Gallery | Design Hunt #2

Sharing a design hunt inspiration on creating a cool mouse direction aware hover effects for your gallery. Originally these effects were found on Fitz Patrick, who is an Australian illustrator based in Sydney. The designer has showcased his work portfolio in a form of gallery where you can find mouse direction aware effects are handled. He has mixed the design with some images, CSS, jQuery plugin, jQuery’s hoverdir.js from Codrops and a custom modernizer.js.

What inspired us?

We were curious about the mouse hover effects and the way the gallery can detect the mouse direction. When the mouse is hovered on the gallery boxes, a mask appears from the direction you brought the mouse. We too love the design illustrations of the designer. All the hard work and appreciation goes to the designer.

We thought of recreating this interface on direction aware hover for our audience as a matter of inspiration. Hence the below work.

Direction Aware Gallery Hover Effect

The coding behind the scene can be found below:

HTML Markup: (Only 3 Blocks Added)



jQuery and Plugins:

Details of the creation:

DesignerFitz Patrick

Inspired From: Fitz Patrick’s Website or Portfolio

Images used in the demo: DesignHuntR

Coding: HTML5, CSS3, jQuery

Plugins: jQuery, jquery.hoverdir.js from Codrops, modernizer.js

Fonts UsedOpen-Sans


We also found a direction aware 3D hover effects designed by Vinicius Dallacqua | WebCloud and he too has inspired the creation from Fitz’s website.

Hope you enjoyed this article. Stay tuned for more.


Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...