Clickable Mask Stack?

Classic Stacks
1

Hi everyone,

Time for a question. I’m using several stacks in Foundation in this hierarchy.

Mask 2 Stack

BACK CONTENT AREA
-Image Foundation Stack
–Target Stack (centers everything within it on the Image above)
—1 Column Foundation Stack
----Image Foundation Stack
----Header Stack
----Paragraph Stack

MASK CONTENT AREA
-Image stack with a single color overlay the same size as the Image

The results of this can be seen at https://airportguide.com/index2.php
Scroll down to the Icons called Weather, Find FBO, Find Fuel, etc. as all of these are using the combination of stacks above.

As you can see, if I hover over the image, the mask fades out. The problem is I want to be able to click anywhere on the image, i.e., it should work like a big button but I can’t get it to work no matter what I do. Does anyone know if this is possible? It seems like the mask is blocking the links set up on the image underneath it.

Thanks for any suggestions on this. (@joeworkman @zeebe)
Mike

EDIT: I forgot to mention that not only is the image link set up but I also set up the mask with the same link. As you can see, the mask does not respond to the link when clicked

2

After much trial and error I came up with something that seems to work. My new structure looks like below. The difference is I added another Target Stack with an empty image containing a higher z-index. The image stack is an empty png file to the exact dimensions of the main image. So a clickable transparent overlay is now sitting on top of everything.

Mask 2 Stack

BACK CONTENT AREA
-Image Foundation Stack
–Target Stack (z-index 998)
—1 Column Foundation Stack
----Image Foundation Stack
----Header Stack
----Paragraph Stack
–Target Stack (z-index 999)
—Image Foundation Stack (transparent png with links set up)

MASK CONTENT AREA
-Image stack

3

If you check out the Sections Box demo by Big White Duck, there are lots of options/examples in the Hover pages

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.