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