On hover, how do I grey out my image and add text. (interaction)

Design help Animations & Interactions
1

hello world, I am building a portfolio and trying to implement some interaction to my site. I have an image that is I want to add a Hover interaction to. Pretty simple. I want to grey out the image and add text, providing a title to the image when on Hover. How does this happen? How can I build this type of interaction?

I cant seem to even get the greyed out effect let alone add text on top of it. Any guidance would be insanely helpful.

Thanks world,
John

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

2

Hey @john_kennedy and welcome to the community! :wave:

One way to achieve the effect would be to include a grey div that sits on top of the image (at a higher z-index) and contains any text you want to show on hover. Make sure this element starts out with an opacity of 0 and display: none. If you want the text to be centered within the div, make sure you first style it as a display: flex with horizontal and vertical centering.

Select the wrapper element that contains both the image and the div, then create an on hover interaction that changes the display of the text div to display: flex, and then fades the opacity from 0 to 100. The hover out interaction would be the reverse of this, with it fading from 100 to 0 opacity and then changing from display: flex to display: none.

That should get you started but if you run into any issues just reply with your read-only link and I (or someone else in the community) will take a closer look :+1:

3

Thank you for the quick reply, I think im getting somewhere.

I currently have each div in a grid. Should I ditch the grid in order to implement this?

Thanks

4

https://preview.webflow.com/preview/jxhnkennedy?utm_medium=preview_link&utm_source=designer&utm_content=jxhnkennedy&preview=e740d0ac9b45311bea19680b877c2fb1&workflow=preview

If you could please take a look at this. Id appreciate it so much

5

It doesn’t matter really how you want to organize the content so no need to ditch the Grid.

I notice you’re using Components (which is awesome and super useful for this type of reusable animation) but you’ll want to make sure you make a Component out of the outer wrapper that contains your text overlay and the image:

  • Image Item Wrapper (Component)
    – List Image Element
    – Text Overlay Div

With the setup above you’ll have all the “pieces” needed to recreate the effect wherever that Component is used across the site. Right now you’ve just got an image element which isn’t much more beneficial that a non-Component image element with a class added to it.

Another change is that your hover interaction element would affect the class used in the item wrapper Component and you’d be controlling the child text overlay div.

Give that a try and let me know if you run into any other hiccups.