Close
Picture of Portfolio Grid with Stylish Hover Effect

Portfolio Grid with Stylish Hover Effect

posted by DnnZone - 08/23/2015
$21.00
$40.00
$52.00
If you face any issue in accessing the demo of the module, please contact us at [email protected]. Thanks.
All DnnZone's Modules are supported on DNN 4, 5, 6, & 7 platforms.
We have revised our upgrade policy - you will get life time free upgrades for all of our modules.
For demo/trial versions of our products, please contact us at [email protected]
At DnnZone, we also provide custom development services for your needs. We will try to provide quality services at better rates.
You can contact us at [email protected]
 
This is a nice looking portfolio/image grid with direction aware hover effect. Stylish direction aware hover effect is added using CSS3 and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse. When we "leave" the element, the overlay will slide out to that direction, following our mouse. This will create an interesting-looking effect.

Items in the grid can be linked to external resource, if link is not specified, clicking an item will open image in light-box.

This module is built using Java-script, HTML and CSS only. No Flash is used. 

Note: Please note, this module requires jQuery 1.7 or higher, please make sure that either your portal has the latest version or you turn on the Include jQuery check-box from module settings page for the first module.

View module in action
View blog post on how to install and use this module
  • DNN 04.xx.xx
  • DNN 05.xx.xx
  • DNN 06.xx.xx
Details about available module settings
This module supports multiple instances on the same page. Each module can have its own images & settings.

You can review the product terms and license details here.

Module Configuration/Settings:

You can customize the settings for this module, including:

  • Randomize Images
  • Container Width
  • Item Size 
  • Spacing
  • Border
  • Border Color 
  • BG Color 
  • Text Color 
  • Text Margin 
  • Gallery Theme 
    • Dark Rounded
    • Light Rounded
    • Dark Square
    • Light Square
    • Default
    • Facebook
  • Auto Play
  • Auto Play Delay

Browser Support:

Live Demo:

You can access live demo here


Following screenshots describe the functionality of this module:

Module Settings Page:

 Module Settings

Manage Images:

Manage Images

Add Image

Portfolio Grid View:

Portfolio Grid View

Hover View: 

Hover View

Gallery View: 

Gallery View