Which stack can do THIS?

(Matthew Abourezk) #1

Hi all,
I am looking for a stack that will do something similar to what is on this site…

If you hover over the grid of images, they “zoom” subtly and text appears over the image. The image is also a link to another page, and the entire grid is responsive.

I bought the Hovermate plug-in which is really cool, but it turns out it isn’t responsive. (I didn’t know anyone would still sell something that isn’t responsive, so I didn’t even look).

Anyway, any thoughts?

(Jonathan Spencer) #2

Can’t you put the Hovermate stack in a responsive grid stack? Hovermate seems to size responsively in my browser window so it should work. You could use a link stack to redirect the Hovermate stack to a gallery of images on a separate page.

(Matthew Abourezk) #3

Hi jspencer,
Well I hope you are right and I am still missing something because I LOVE the effects in Hovermate, but I am not able to get hovermate to be responsive, even in a responsive grid/column stack. In hover mate you have no choice but to define the width of the image in pixels. So the best I can get is that as the page gets smaller, the images overlap until they snap into a vertical stack. They never change in size because their dimensions are defined inside the HM stack. Can you send me a URL where I could see the HM stack act responsively?

Also, I just realized that maybe the secret sauce in your reply is [quote=“jspencer2, post:2, topic:6527”]
You could use a link stack to redirect the Hovermate stack to a gallery of images on a separate page.
[/quote] I’m not sure what you mean by that?

(Gary) #4

mabou2 - I am making a whole load of announcements in the next week or so. One of them will I believe, provide you with a solution to what you are looking for.

(Matthew Abourezk) #5

Excellent. How do I get notified when you release the software? Can you add me to your mailing list ?

(Gary) #6

Just sign up to my newsletter at www.webdeersign.com

(Jonathan Spencer) #7


Joe Workman has a link stack that turns any stack into a link that you can redirect to a gallery page.

I looked at the hovermate demo page and when resizing the browser window the images resized responsively although the text is fixed in size. I’m sure if you drop a link stack with a Hovermate stack into a responsive grid (there are loads out there) it would reproduce the effect you are looking for. The stack Webdeer also sounds like it will fit the bill though and probably with less fuss.

(Jonathan Spencer) #8

I have bought Hovermate as it looked like a cool stack to have! It is responsive, you don’t need to put the image size in but do make sure the image is appropriately sized for the container and they are all the same aspect ratio. I cobbled a quick demo here.
Hovermate Demo
It took about half and hour of playing about with image sizes and aspect ratios mainly. I used Joe Workman’s Foundation stacks and 1LD’s responsive grids but I’m sure others will work just fine.
Hovermate has a ‘Target URL’ button at the very bottom of the stack settings so you can link it to a gallery or other page.

(Matthew Abourezk) #9

OK, I get it… there is an odd behavior in Hovermate… once you write an image width in the Hovermate stack, you can’t delete it. If I try to delete it, it defaults to 100px. So I dragged a new Hovermate in and it worked responsively. Thanks a bunch.

Also, fwiw… not sure why, but in Safari when I scrub the window size from large to smaller (and visa-versa), your demo page strobes back n forth to full white. Then entire page strobes, which is seizure-inducing :slight_smile: Just thought you should know.

Anyway, thanks for all your input, much appreciated.

(Matthew Abourezk) #10

OH… and I visited the Hovermate website last night to show my girlfriend what I was hoping to add to my site, and discovered that Hovermate is completely dead on an IOS device. Not one of the hover actions worked on the demo site. So that alone knocks me out of Hovermate.

(Demoulin) #11

Image Plus from Doobox does the subtile zoom.

(David) #12

That may be because there is no hover on iOS asfaik. Maybe someone can correct me if I’m wrong.

(Matthew Abourezk) #13

You are right, there is no hover per-se… but stacks developers are creating cool workarounds for IOS, such as swiping an image to see the popup info. At the very least, you should be able to touch an image and have it respond.

(Matthew Abourezk) #14

Hi Mod,
I bought imagePlus from Doobox for that very same reason. I didn’t read enough of the info though… it isn’t a hover effect your are buying, it is an info lightbox that has a hover effect. No way to separate the two. You get that great hover zoom, but your only option is to click the image and see a special info page that is built in to ImagePlus.

(Gabrielle Vickery) #15

Image Plus doesn’t allow you to add text to the stack though does it?

I bought Hovermate which I think has some gorgeous effects, BUT it won’t play nicely with my Blueball Freestacks Theme :(, so I can’t use it after all.

Are there any other stacks out there that are similar to Hovermate but are a bit more code friendly to themes like Freestacks?

(Jason Bostick) #16

You could try Sections Pro by Big White Duck. http://bigwhiteduck.com/stacks/sectionspro/

There’s a bit of a learning curve but it’s a super flexible stack with lots of uses. But it has hover animations and all that.

It is optimised for Foundation but not tied to it so hopefully it works fine with your theme.

(Gary) #17

I do a very similar thing in my RapidTemplate 3 http://www.webdeersign.com/templates/tp3demo1/ which uses SectionsPro and also some CSS to achieve very similar effects.

To do these type of layouts properly you need full control over the text and how it behaves when the screen reduces in size. You also need tight control on the size of the stack container so it is very much a layout of clever stacks needed rather than a single stack.

(Gabrielle Vickery) #18

Ooh yes that’s what I need, I’ll check with Charlie at Blueball to see if he has any thought on it. Thank you both.

(Andrew Tavernor) #19

The only Foundation feature in Sections Pro is that it can make use of the Foundation height equaliser and magellan scroll markers. Nothing else in it is Foundation specific.

(Gabrielle Vickery) #20

Ok that’s good to know thanks Tav, also Charlie from Blueball Freestack has given me lots of other options to try out, so I will go forth and experiment, thanks all.