Slider Series: Direction-Aware Hover Effect

The Direction-Aware Hover Effect is not really a slider but rather an image grid with a novel built-in hover effect. As you drag your mouse over the grid of thumbnail images, a directionally aware caption appears to slide over the current thumbnail. The captions are well designed and and can have a link to a separate page where more details can be found.

1hoverinfo.html

The Caption Mask in the upper right changes as the mouse hovers over a new thumbnail.

This is another free Codrops slider but one that does not provide a responsive design. In comparison, other sliders like the Refined Slider and the Animated Grid Slider  do have responsive designs that work well on smartphones and tablets as well as PCs. As always seeing the slider in action provides a better feel for its capabilities.
As can be seen this grid is not Responsive.

This is another way to show off a portfolio or a number of key products. One client has used an added routine to provide randomly some customers with a discount if they click on certain products and order during their session.  Another approach is to send customers to a another grid  layout that shows more options and choices but using bigger images and fixed caption info. In sum, Direction-Aware Hover Effect grid is proof that sliders and grids are displacing classic dropdown menus as ways for customers to navigate on websites.

Leave a Comment

Share via
Copy link
Powered by Social Snap