I’m looking for a way to animate my text differently from the image it is on.
I want to create an interaction where text appears on the image with 100% opacity when hovered, but the image has 30% opacity. I want a picture of my body, so I can’t use just black color on the background of my text.
The problem is that I need to place the text inside a DIV block to overlay the image. If I do so - then the text opacity drops to 30% as well. If I don’t place it in the DIV, it stands next to it.
I can create them as separate object and place in a grid next to each other, but in that case I will need to make a new animation for each element on my page and I’m planing to have 60 elements like this.
I have been having some real headaches. Please help!
Here is my public share link: HABITAT
(how to access public share link)