How to get navigation effect for image gallery?

1

Hi!
Can anyone tell me how to achieve this kind of navigation effect for image gallery or individual hover boxes on the grid?

2

Iā€™m sure you could do the animations with a combination of SectionsPro and SectionsBOX. Not sure about that cursor though, unless this can be incorporated.

3

Thanks @rob.beattie

Can you say is there a ā€˜navigationā€™ option on Sections? So that if I click ā€˜restaurantsā€™ I get only those images if ā€˜duckā€™ I get ducks.

4

As Rob said, this is what SectionsPro and Sections Box does perfectly with every option under the sun.

You will also need a Grid stack such as S4S Adaptive Grid to create the grid layout. In each grid position you will need a SectionsPro containing the BG image. Then use a a SectionsPro Animate stack to add a hover overlay to the image and animate a SectionsBox to slide up over the image. Add a link to each Sections Box and that is how you create a navigation, i.e. when you click on an image, you go to the link.

Andrew has a ton of examples and if you dig through the SectionsPro demos you will understand how to do this.

Edit. I use the technique a lot in my Projects. A very close effect can be see with the Social Media ā€œbuttonsā€ at the bottom of this page - https://www.webdeersign.com/pr11demo2/

The initial BG image is being almost hidden with an almost completely opaque, i.e. high opacity overlay and a Sections Box is positioned over the image. On Hover, the overlay is animated to a lower opacity so that the image is revealed, the initial Sections Box is animated off to the bottom and a new Sections Box is animated with the same timings, to slide in from the top and replace the initial text. It is actually quite a lot of stuff going on but when you break it all down into what exactly is happening you can begin to understand how to create such an effect.

p11demo1
p11demo1.gif1102Ɨ304 1.6 MB

4 Likes
5

No. Sections will do the hover effects on each individual image or category. Youā€™ll need to put these Sections stacks inside a Filter stack like the one that @willwood does or that Yabdab does. Sorry, at work so rushing.

2 Likes