0
down vote
favorite
I made some research before writing here, but I couldn’t find nothing that satisfied my answer to this specific case.
I have an icon, and when user hover onto it I want the icon become smaller and text (caption for the icon) should appear -at icons bottom.
As now, I have an interaction for the icon, that makes it become smaller. It’s first time for me working with WebFlow, and I see that using overlapping blocks they work as layers in the sense that the one on top is the only one who react to hovering.
I found in other questions that there was the need of setting correctly absolute/relative for blocks, but is not working for me since I have also the icon, inside the same block.
If I move the icon out of the block, I have the problem I shared before about overlapping “layers”.
I need that icon decrease in size and text appear at the same time.
2)http://cederiks-playground.webflow.io/roberto2
you can see how I want to have the caption.
Here I only substitute the backgound image in the divblock (text is inside image with icon): but you see animation is not smooth.
the page I am working on is inside that project, page name inside Roberto folder: ScreenButtons
I have another question:
If you see I have icons with not 100% alpha.
Now works as: when I click on them, image on top disappear and you can see the one beyond.
Problem is that colours of back images modify the blue of top icons, because of that transparency.
Is it possible to say: "icon on the back is always transparent, and when I click on blue icon, the top blue icon disappear and the back one take its full alpha.
I would like to have same blue for all icons when not selected, and I need to have that transparency.