How to show image overlay on hover?

Design help Animations & Interactions
1

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:

Productos_Artboard 2
Productos_Artboard 21501×677 87.2 KB

Productos2
Productos21501×678 76.2 KB

Productos_Artboard 2 copy 3
Productos_Artboard 2 copy 31501×678 80.7 KB

Productos_Artboard 2 copy 2
Productos_Artboard 2 copy 21501×678 86.3 KB

WHAT I GET

Productos5
Productos53026×1350 188 KB

Productos6
Productos61501×678 38.7 KB

Productos7
Productos71501×678 95.3 KB

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

2

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: