This seems impossible in RW...any ideas?

Hi all,

I’m trying to achieve a hover/modal effect for my client.

Basically he wants the same as this website. https://www.biota.net.au/projects

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?

Many thanks for all ideas.
Cheers Scott

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

http://sectionspro.bigwhiteduck.com/box/hover-captions/

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.

3 Likes

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

I think that covers it all.

Here is it working (very quick and dirty)
https://test.bigwhiteduck.com/biotaexample/

I’ve made the project in Foundry as per your post. You can download it here

7 Likes

OMG - you create a demo while waiting for the mail, lol. Writing my response took me longer, than you providing a demo.

Thanks for another learning opportunity !

2 Likes

Hi Andrew,
Thanks so much…like Gerd said that is amazing!
Works great.

Though I’m a bit confused to with how it works…there is an empty container with css class infosec. Why is that required?

And if I only wanted the 2nd Sections Pro and Sections Box to appear as the client we don’t require the first one with blue flower and red buttons.

Basically he only needs the 2nd set to appear and with hover to then open the modal with information.

Thanks again for your brilliant help.

Cheers Scott

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

Screenshot 2021-08-21 at 21.10.21

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.

3 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.