Stack that raise or animate image when mouse hover over it


(Bill Fleming) #1

Any good stack out there that raise or zoom in the image a bit when mouse is hovering over it to imply that it is a clickable link?

Thank you


Are You Missing Out On The Latest RW News?
(Jason Bostick) #2

I think it’s called HoverBox by Stacs4Stacks. The suite of SectionsPro stacks by Big White Duck has this as well (Sections Box in particular). It’s quite a bit more flexible, but can also take some time to setup. I’ll usually look for soemthing off his demo site (http://sectionspro.bigwhiteduck.com/box/hover-captions/) and then grab the Sections demo file and reverse engineer it.

There are others but those do the trick I think


(Rob Beattie) #3

Image Wizard might do the trick and has a demo version you can play with.
Image Card from Weavium is free and has some nice effects
Or take a look at SectionsBOX from BWD - donationware, more complex but soooo flexible.


(Bill Fleming) #4

I really like the image card, I had it set perfectly in my foundation column stack but it doesn’t seem to be responsive. I think it because of the image card fixed height for each platform is causing it not to be responsive .

Is there a way or a trick to make it responsive with foundation column stack?

Bill


(Rob Beattie) #5

Responsive how? What exactly do you want to happen on smaller screens?

Rob


(Bill Fleming) #6

When I shrink the browser, the card was cut in half instead resizing itself to fit inside the foundation column


(Rob Beattie) #7

There’s something else going on then Bill. I’ve just created a blank Foundation project, added the three column stack and then dropped the Card stack into each column. Re-sizing the browser shows the cards shrink until they reach the break point when they stack.

I haven’t changed any settings at all.


(Bill Fleming) #8

Did you use images for each card instead of background color?

You could be right that it may be something else so I will try it on a blank foundation and I had 6 columns which turns to stacked 3 on tablet then 2 on mobile.


(Rob Beattie) #9

I used an image on one card inside a Foundation single column stack and it behaved as I expected it to.


(Bill Fleming) #10

I created a test page over at

https://agwm.org/test/

On our production page, we have a row of 6 magazines and/or reports that each either links to a downloadable pdf or a flipbook. Right now it just a image each cover with a drop shadow. I wanted to add effect and a icon to imply that the image is a clickable link.

Reason I like the image card stack is because it offer 3 what I needed. hover effect, drop shadow, and icon to imply that it clickable.

On test page,

First row is using the image card stack.

Second row is what I have on my production page right now which I wanted to add effect to it.

On production page the image is actually different for each magazine or report, I just created one stack and clone it into other column to create a quick test page.

Check what happen when you view it in different size and compare both rows.

Bill


(Rob Beattie) #11

So is the issue that the second lot of photos is behaving as you want it to and the top set isn’t?


(Bill Fleming) #12

The second lot of photos is what I have right now on my website and the responsive is behaving the way I wanted it to but I wanted to add a hover effect, drop shadow, and link indicator to each of the photo.

I removed my drop shadow stack and added an image card stack but it seem to break the image cutting it in half when in tablet or mobile mode so it doesn’t seem to be very responsive like my original version on the second lot.


(Jason Bostick) #13

I haven’t used the stack yet, but there appears to be height settings for the various screen sizes. Have you tried playing with that? It seems that on tablet view, it is showing a square ratio and the (portrait) image is just enlarging itself to fill the width, hence, it is getting cropped.


(Bill Fleming) #14

Yeah, I played with all the settings on it and you’re correct about it changing to square ratio in tablet view and it seem to be narrower on the mobile view too.

Right now, I am putting image card on hold and I am testing the Section Pro stack.

The section pro stack seem to do what I wanted and still responsive the way I wanted. So far I got the hover effect down. Now I am trying to figure how to add the drop shadow and link indicator to it.


(robertreinink) #15

@TechBill
Did you contact @weavium for a solution.
I would like to know to why this is and how to solve this


(Bill Fleming) #16

Yes, I email support last week and I haven’t heard back yet from them. This is one of their free stack so I don’t expect them to offer support on it unless they wanted to.


(Rob Beattie) #17

Ah. Got you. Out tonight it will take a look in the morning. You may ha e
to put the card stack inside something else that lets you control it’s
proportions - maybe Blueprint or Sections Pro?


(robertreinink) #18

I think not to respond would be a serious issue for a startup in the weaver community. I like thier stacks and bought the gridinator stack (the free card stack included) among others and not responding makes me wonder :thinking:
Also I notice that the live previews of many stacks on my iPhone 7 don’t work as they should. But that might be a website or iPhone 7 issue. I hope @weavium will respond soon with a working solution for you.


(Bill Fleming) #19

I think I just fell in love with BWD and their stacks!!!

https://agwm.org/test/

The last row was done using Section box from BWD. I kind of like it how it was 100% customizable and I can set it any way I wanted to. Thank you to the great folks at BWD. Donations coming to you!


(Bill Fleming) #21

I updated the test page adding header to each row with the name of stack used to create it.

https://agwm.org/test/