Hover and Link option when using grid

Hello, I am a newbie.

I used to play around with Wordpress, and although it was nice and looked professional I was not complete satisfied with the results. I had the feeling I was not fully in control to make creative websites. So I went looking for something else. I had already Rapidweaver 4 and with the availability of Stacks module, there were oppurtunaties of two free form frameworks, Foundation and Foundry. I have chosen Foundry (and bought it November last year) because of the elegant, simplicity and good looking web designs.

After finishing a website for my sister I would like to make my own, to put all I my audio-project on. So I went looking for a portfolio stack and found this one: Rapidweaver Responsive Grid Stack
Off-course I could buy this stack, but is there a way to do this (hover over and linked to my audio-pages) with Card stack or grid? Or perhaps with Bloom?

Thanks in advance.
René

Rene: I don’t think there’s anything that will accomplish what you want from the default Foundry stacks, even in some combination. If I’m wrong then I’m all ears about how to accomplish this.

Bloom comes close, but is different from the grid stack you showed. It will work fine with Foundry, but only you know if it comes close enough for your needs.

You may want to also check out the stacks at Stacks4Stacks. Will has a large collection of stacks, some of them free. There may be a specialty stack there you could use towards this end. For instance there’s Hover Box:

Or the free LinkBox with a good set of other stacks may get you close:

… as an example you could combine LinkBox with Foundry Card stacks. (I believe you’d have to use individual Card stacks rather than a Card Deck to work with LinkBox)

Why not just add a link inside a Card? That would work.

Alternatively you could use a grid stack like S4S Adaptive Grid and BWD SectionsPro, SectionsBox or Blueprint to provide the image with a hover effect that then links to the audio.

A link inside a card works as a functional “link” but in the example Rene gave the complete box was a link. So a card inside a linkbox stack comes closer to the look he wanted.

S4S Adaptive Grid combined with Linkbox works very nicely also. (Probably does with SectionsPro, etc. also but not 100% positive, or may not be needed at all with those particular stacks.)

You could put a Blueprint or SectionsBox with a link and fill the Blueprint with an image set to show an effect on hover - inside a Card.

I used S4S AdaptiveGrid and SectionsBoxes for the similar effects in the grids at webdeersign.com/pr11demo2/

Alternatively, inStacks Poster is also a very good solution.

I can’t think of a way of achieving this with just Foundry stacks.

Thanks, Mitchell and webdeersign for the several good advices.

You are right Mitchell. It’s about the look I like in particularly. I have made a nice page with Card Decks with a button (linked) already, but could not manage to get the hover and link of the complete deck work.

I am gong to try the different stacks you have mentioned and see if i get it done. But I think it will not be problem.

Thanks again.

@webdeersign: Gary: nice examples!

Also, I completely forgot about Poster stack. Rene: if you already have this stack then it could be a great option for you.

Hi there @Rene_J – There will be a grid stack included in a set of addons for Foundry that I have in the works. It is already coded up. Along with another stack that you may also like for doing designs similar to the one you’ve shown an example of above.

3 Likes

Sounds exciting! Look forward to the new goodies.

1 Like

@elixirgraphics , That is great! I am looking forward to see the new stacks coming.

In the mean, I am going to practice myself with the above stacks.
And no, I don’t have the poster stack yet, but I will have a look.

@webdeersign: and indeed, nice peace of work.

Many thanks!

Big White Ducks sections box will do exactly what you want and loads more.

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

I thought it would be nice to share my results so far.
I first tried the combination with Adapter grid and Hoverbox and with Adapter grid and Card Decks. And it works already very nice.

http://www.rene-janssen.eu/test/

The links aren’t working and the text appears because I use the Hoverbox demo-version.
Thanks for the inspiration and help.

Nicely done. I didn’t realize HoverBox also served as a LinkBox stack: so that works great.

I’m looking forward to seeing what @elixirgraphics cooks up, but the HoverBox approach certainly works nicely. And certainly Adam’s upcoming Grid stack will help. I just don’t know what the “other” new stack from him is.

Hoping that Cards will get a link facillity which would make these type of popular layouts really easy to achieve.

SectionsBox and Blueprint also have link capability. We are lucky there are so many ways to skin this cat.

I bought Hoverbox and it works alright with AdaptiveGrid, although I had some difficulty to get the horizontal lines fluid (going straight throughout the columns). I had to change the Desktop Width setting of Grid Cell 3 from 33,33% to 33,20%. Strange but it worked. See Audio | René Janssen

Another minor thing is when I scaled the window to smartphone size then the vertical lines becomes visible (like it is supposed to be) but somehow it is a little bit disturbing. But solved this with the visibility stack within Foundry.

Thanks again for the great help!