How to animate differently text and background image in one DIV

Hello :slight_smile:

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)

Possible but need the share link to your project. I’m only seeing a link to your published site.