Grid + Hover combo


#21

@elixirgraphics Sounds great!

Even though there are lots of examples out there on how to code that using CSS, nobody in the Rapidweaver world has put that in a stack yet.


#22

If i understand you correctly, Stacks4stacks Imagewizard will do the zoom effect, or BigWhiteDuck’s SectionsBox. There are probably several others if you search the RW community site or Stack Central.


#23

The main one that comes to mind is BWD SectionsBox and I am pretty sure you could use BWD BluePrintONE to do it too. S4S is bound to have something to do this. Or use S4S Graphic stack which has a Custom Class box and add in a few lines of code.

I do agree that this would be a good addition to Hover.


#24

S4S Imagewizard does it. In the demo as “scale” effect:

https://stacks4stacks.com/imagewizard/


#25

After a bit of investigation , I found that you can do this with the Hover stack, i.e. just zoom in with no text overlay or header text.

The settings below will do it:


#26

Thank you so much for your suggestions @David and @webdeersign

I’ll give those a try. Here’s what’s making my situation more complicated (and I guess it has to do with going outside of Foundry).

On my website: http://markuswernig.net/ I am creating a grid using Doobox’s GRID, which gives me full control over gutter spacing (which Foundry’s Grid doesn’t). Then I am using Doobox’s VIDEO PLUS to launch videos in a really nice and unique lightbox effect (they are also the only ones - as far as I know - who allow me to use actual VIMEO embed code in their video lightbox stack, which gives me much more control.)

So any hover stack would have to go inside the VIDEO PLUS stack. So far all hover stacks that I tried threw the grid out of whack.

Maybe it has to do with Doobox’s stacks, maybe it’s the combination of their stacks with Foundry. - I’ll have to do more experimenting.


#27

I guess I interpreted what he wanted differently. I thought he wanted the entire image to get slightly larger, and not be confined by the original image’s dimensions.


#28

Yes it can be read a few ways. I may have misinterpreted it too but there are some interesting additional possibilities in the Zoom stack if you play about with it.


#29

@elixirgraphics is this effect possible with foundry + potion pack ->
That text box slide when hovering over photo?

http://northcascadebuilders.com


#30

I would suggest not even using that particular effect as the non responsive text on the red BG hides the images below and looks pretty poor on smaller screens. It looks a mess to me:

Potion Pack has some great effects that look much better than that one IMHO.

If you really wanted to create that exact set of effects then BWD SectionsPro will do it exactly as you see it and improve on it if you wanted to.


#31

Thanks, I am all for even better looking effects! :relaxed:
Potion pack tutorial looked good. But is there away to do background image zoom affect as well? Or if needed can I use BWD SP if needed with (and other stacks as well) with Foundry?


#32

There are 2 answers. You can do the zoom effect with a few lines of CSS if you know how. If you don’t know how, then this would be a great excuse to learn how to do it and a few Google searches will get you started. When you figure it out you will kick yourself for not learning it before:)

Otherwise, you can add this additional effect with SectionsPro. Many RW users think that SectionsPro is complicated but the reality is that you are now defining a complicated multi layered effect that needs each animation to be defined and then executed somehow. Even writing down a description of the effects on a piece of paper to hand to a programmer to build for you, is not easy. So SP can do it but you will need to analyse the animations required first and tackle each one and then build the whole effect one effect at a time. What I like about this approach is often you get the process wrong because you don’t quite understand the animation, but you will start to understand the process and can end up with a completely different effect which you prefer.


#33

To add on to that (in regards to Section Pro), there is a demo file that you can download that replicates this page http://sectionspro.bigwhiteduck.com/box/hover-captions/ (among others), so you won’t be starting from scratch. You can take a piece that you like, copy it into a new project, and dig into the settings.