Add text over an image when you hover over the image

Design help Animations & Interactions
1

I wanted to showcase the projects I have worked on. I already have an image on my homepage under the Portfolio section that directs users to that specific project. I wanted to have the image be dimmed when the cursor has hovered over the image and I wanted to be able to post text on the image. But I only want the text to be shown when the cursor is hovered over the image, so users can know which project they are clicking on.

The Problem I am having is that I do not know how to perfectly center and place text over an image that would only appear when the cursor hovers over it.

Currently, I have the image dim when the cursor hovers over the image. I also have managed to place text over the image, but the text is showing on image at all times. Also when the cursor hovers over the image, the image dims like its supposed to, but the text over the image dims as well.

What is the best way to solve my problem?

Here is my public share link: https://preview.webflow.com/preview/nathnaelsolomon?preview=185e36f9a8f6f23ad0305f5df4809580

35 AM
35 AM2880×1608 715 KB

2

Hi @ns23

Here is one way to approach it (from scratch, but to give an idea of construction):

  • Div Block 1 - add a background image
  • Add a Div Block 2 inside Div Block 1
  • Make Div Block 2 100% so it covers Div Block 1
  • Make Div Block 2 display flex, then use the vertical centering settings
  • Add a link/text block inside div block 2 - it’s parent will then be centering it.
  • Change Div Block 2 (the parent) to transparent text and transparent background (it then applies those to it’s children)
  • Add a ‘hover’ state to Div Block 2 - so when hovered it has text white and background grey with some opacity.
  • Set state to ‘none’ and hover your mouse over to see if it works :wink:

That should give you the effect you are looking for - hope it helps!

Stu

2 Likes
3

@StuM Thank you for your help! Your suggestions worked

4

Great! You could also add a 200ms transition to the background colour on the second div block, like you have done for the 200ms opacity on the link block. (or try 300/400ms) smoooooth :slight_smile:

Glad I could help
Stu

5

@StuM Thanks again. Those suggestions made it feel more smooth

1 Like
6

@StuMSetting Div background doesn’t apply to the collection list right ?