Hi!
Can anyone tell me how to achieve this kind of navigation effect for image gallery or individual hover boxes on the grid?
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.
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.
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.
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.