My client has a requested to add an icon or other method (like opacity change for example) to the Zoom stack, as she doesn’t think visitors will realize that the images can be zoomed on click.
I’ve used the Overlap stack to place a FA icon from the Icon Font stack to place the FA icon onto the Zoom stack image, but unfortunately the area with FA icon no longer triggers the Zoom stack.
Any ideas on how to get the Zoom stack trigger to work with this configuration, or an alternative way to have some kind of indicator for the Zoom stack?
Currently the indicator is that the cursor turns into a magnifying glass with the plus sign inside of it as the visitor passes over the image.
I’ll add it to my todo list of things to look at… The problem that might arise though is that it would require adding an overlay to the image, thus making the image un-clickable, and making the image zoom inaccessible, as the Zoom stack actually shrinks down the full-size image and then zooms up that full-size image once clicked. So I can’t promise that this is a doable thing. You’ve seen this same thing with using the Overlap stack in your test.
Currently I do have a lot going on, so it might not be something immediate that I can look at.
What about adding a soft drop shadow to the image when hovered over? Or having the image zoom just a tiny bit when hovered over? Thoughts? These would be configureable of course.
You mean like an overlay, so that the image is tinted when hovered over? If so, then yes. That tinted overlay covers the image, making it non-clickable, just as the Overlap stack caused a problem in your setup. It is the same general principle.
I could maybe apply a CSS ‘filter’ of sorts to it, but I’ll have to look at it. I think the most reliable things would be the two I mentioned above and the Badge Box stack, for this particular Zoom stack. I’ll have a closer look tomorrow.
I just put up the Badge stack and I really like it - hope the client will too. As this is my first completely new project since Potion Pack was released, I apparently forgot about some of the new stacks like Badge. There are really quite a lot of Foundry stacks now - it’s amazing actually! So I really appreciate your suggestion. The Forum is so great for problem solving input as others have mentioned previously.
The badge box solution is a neat win win solution because it remains visible on all devices. Quite a few “hover” type images effects don’t work on touch devices where there is no hover. Using the badge box makes it very obvious that it can be clicked or pressed.