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.


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