I’ve added simple colour fill to the rollover content area but for the real thing the content would be a little different.
My question is, if I hover over one section can I also make another rollover content area appear ‘slaving it to another’? In my example I imagine all the green areas to appear when one other green section is hovered over and vice-versa with the oranges. Probably in the real site it’ll only be the section neighbouring the one being hovered that will need to be slaved, but I’m sure the same principal will apply!
Additionally, I believe the final site will include a longer image, which will be created using Stacks4Stacks:
Useful stack - for horizontal scrolling
Adaptive Grid
HoverBox
and would have one long image which scrolls horizontally, I’ve mocked this up repeating the same image here .
Technically it would be feasible to do, but I don’t quite understand the usage case for doing something like this. It could get confusing if someone mouses over one part of a page and something else in the page does something. Likewise on smaller screens if the page reflows responsively, the effect may be outside of the viewport and further up or down the page. Do you have an example of a website that is already doing something similar?
I am recreating this page in Stacks rather than Blocks so that I can make use of the horizontal scrolling your Useful Stack offers. As discussed with you elsewhere, I am using Adaptive Grid and HoverBox for the rollover sections.
On the original, each section that rolls over corresponds to a year in my client’s studying/work life. I am hoping that each section of study may still be rolled over as a group.
Because I am using the Adaptive Grid technique and therefore each section of the portfolio must be the same size, I am assigning each numbered portfolio page to an individual HoverBox/column in the Adaptive Grid (if you look at the original some sections are 200px+ in width, while others are only 44px).
So hopefully, this ‘multi hovering’ effect would not be too confusing as the content would be neighbouring, unlike the demo I threw together, which I will admit is pretty mis-leading, sorry.
Slicing up your image and splitting it between multiple HoverBox stacks within a AdaptiveGrid stack would be the best way to replicate this sort of setup in Stacks, as opposed to Blocks.
I’m still not quite sure where the need to cross-link multiple HoverBox stacks comes into the equation (if anyone else reading this thread can explain it better to me then feel free to do so) but possibly the way you set this up could enable you to give the impression of the top and bottom groups of thumbnail images displaying simultaneously on mouseover (same as in the demo link). These could be set as links to a lightbox or another page.
If you’re finding the AdaptiveGrid stack is scaling down too small and is not scrolling within the UsefulStack, then this may be easily rectified by giving the AdaptiveGrid stack a min-width it’s permitted to scale-down to, using custom CSS code:
Thank you @willwood, I will go back to the drawing board I think with this one; I think perhaps keeping it simple, one HoverBox per portfolio page, with one roll over! Thanks for the code snippet; so far, the scrolling is going well, but I will keep it in mind!