How to show image overlay on hover?

Hello, I need help.

So I’m trying to create a grid with pictures that when you hover over each they change to a solid color with a text (name).

I’m using a grid for each picture, with the text overlapping the image. Then I applied the text color and BG color animations to the text, setting it to transparent as initial “on hover” state, then the colors I want as final state. And then on “on hover out” is the opposite (color to transparent).

The issue is that even though outside the animation (on the composition) the text and the BG colors are transparent so they’re invisible over the images, when I preview they initially appear with color, covering the pictures, and after I hover over them and out the show the picture, but as soon as I hover over a different picture they go back to being colored.

Idk if I’m explaining myself: I want pictures or images that only when I hover over them they change into solid BG and show a text.

WHAT I WANT:




WHAT I GET




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

hi @Gina_R and welcome. The effect you are trying to achieve is very simple. As this is common task there is good amount of solutions so feel free to spend some time to search this forum before posting a new request.

Anyway I have done short how to video to give you an idea.

Hope this video will solve your request, if yes please mark your request as solved :wink: