First, how are you trying to animate this, by using the BSS built in Animation tool (AOS Library), or writing your own CSS with animations using keyframes, transitions, transforms, etc? What exactly do you want the dollar sign to do?
If I wanted to do this, I would probably put the dollar sign icon into its own div that is the same size as the pink box, and then position it so it’s the same size, and right on top of the pink box.
I do stuff like this all the time on my websites for martial arts schools where I have a series of boxes that represent the programs the schools offer, and when someone hovers over the box, elements inside the box move, enlarge, vanish, etc. Here’s an example…
Scroll down to where it says, “EXPLORE OUR PROGRAMS” and hover over any of the boxes.
You basically just need to know how to nest divs using relative and absolute positioning, and the link component. Another way might be to use a pseudo class.
You can do it with BSS animation tools as well, but again, you need to start by separating the div containing the dollar sign from the one containing the text.
Your second question (creating animating relationships between objects in different places on the page) would probably require some javascript.