Her doesn’t have the same number of projects…there are 10 at the moment which I’ll use in a grid layout using Foundry.
When you hover over the image we want a few words to appear, then click to open a modal with further information.
I have a number of image hover stacks, modal stacks, flip stacks but none will achieve the result.
I have following stacks; Hover Stacks
Hovermate - DK Stacks
oHover - Weaver Themes
Hover Image - Elixir Modal Stacks
All Foundry Modal stacks - Elixir
Multistep - Weavium
Panels - Weavium
Expanse - 1LD
View More - Weavium
Flex - Weavium
Plus others…
What I can’t seem to achieve within the one panel is to have an image with text content overlay with the text content appearing on hover that will then be able to click to open a modal stack…
The Biota website project page in the link above appears to do all this but is it achievable in RW?
As ‘always’ @tav has a solution with his stacks. If you look at the demo page, it shows images that have some animation happen on ‘hover’ (e.g. show some text). The elements can be still clicked, which then can open a new page or likely a modal as well (here Andrew’s Limelight stack will likely work, too).
Edit: wrote my response before checking your link. You’re looking for a more intricate solution, where the image is replaced by multiple buttons, each changing the modal. There was a recent discussion of ‘flip’ stacks where an image can be flipped, and the ‘backside’ will be displayed, which can be any stacks again. Such a stack in combination with limelight should get you to your goal.
The thread was ‘Switching content without Controllers’
As @GKs says in his initial reply, its pretty easy to do with SectionsPro. If you use SectionsBox to contain your buttons, you can show this on hover over the top of the section using the Animate child stack.
There are lots of examples of this on the Sections Box demo site which you can also download as a project file.
I’m sure there are lots of other ways to do this as well.
I was waiting for a parcel to arrive so I made you a little example project showing how to do the whole thing.
The buttons in SectionsBox are as above and will appear when the image is hovered.
These then open a Limelight that is set to display its content in the page rather than as a modal. This setup shows the info panels as per your example site.
In each info panel we then have another set of columns (I’ve only filled one in each instance) of pictures which when hovered show some text.
Clicking this text opens a modal lightbox (another Limelight).
This is the container into which we lightbox the “in page” content that appears when you click one of the buttons in the initial image. It can be anything with the class specified in the Limelight main settings
Then just put that on the page directly and remove it from the first Limelight.
I just copied the original page which had the 2 stage process to get to the final lightbox. I tend to agree and thing that this is a bit cumbersome - straight from the image to the lightbox may well be better.
I’m not entirely sure I understand this bit, I’m sure I’ve got the wrong end of the stick as opening a lightbox on hover is not something you would want to do.
If I can understand exactly how you want it to behave then I’ll modify the project to suit. If you want to email me (support [at] bigwhiteduck [dot] com) then I can sort it out for you. If it is easier, you could even make a little video talking through what you’d like it to do; whichever is best for you.