Streaming live at 10am (PST)

Can text appear while hover on an icon in Webflow?


#1

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.

Is this achievable?

Right now, this is what I can achieve:

1) http://cederiks-playground.webflow.io/roberto
caption (for setting) always present here: I want the caption to appear only when the icon become smaller-

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.

Thank you for your help!!!


Here is my public share link: LINK
(how to access public share link)


#2

Hello @robertotaminell

Yes, it is. And it would really help for the explanation if you could share the read-only link yo your project.

How to share a read-only link:
http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

Cheers,
Anna


#3

Hi, thank you for your reply.
This is the page on which I need to work (you can see published results):
http://cederiks-playground.webflow.io/roberto/screenbuttons

This is the READ-ONLY link:
https://preview.webflow.com/preview/cederiks-playground?preview=45c852acfee57c3b61fcbf55b6334921

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.

Thank you @sabanna !

Roberto


#4

Hi @robertotaminell

Yes, it is possible.

So you want to have 2 animations:
- when you hover over the button it becomes smaller+text appear and
- when you click on the button it changes the image inside the button

Am I correct?


#5

Hi @sabanna,

yes, you are right.
and ideal solution would be:
- when you hover over the button it becomes smaller+text appear + change color(not alpha)/or image for the icon
- when you click on the button it changes the image inside the button


#6

Ok, I made few videos (screncast), step-by-step:

1) Change structure a bit and create a hover effect:


2) Add animation on click

3) Add animation for text

Best,
Anna


#7

@sabanna Thank you! Very enlightening!


#8

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