How to animation an element when mouseover a different element

Webdesign Help
#1

In the example below, I’d like the money icon to be animated any time the mouse enters its parent’s container area (represented by the pink box). I currently can only get it to animate when the mouse is directly over the money icon itself.

image

I tried looking for the animation code that BSS is using, in order to set an animation on the group but then manually change the animation target to only the icon. But I couldn’t find any such code to tweak. :confused:

Theoretically, I’d also like to know how to set up an animation relationship between any two elements on a page, even when they’re not within the same group.

#2

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.

1 Like
#3

You could write a small script to add a data-attribute to the parent and then target the children that are using animate.css hovers. Disable pointer events if you do not want the child to hover also.

Children are animated

1 Like
#4

I am trying to use the built-in animation of BSS, yes.

Your martial arts website animation is pretty slick! I’ll give your suggestion a try.

#5

It looks like your “children are animated” link is dead, but I’d be interested to see what you had there… any chance you’d be willing to put it back up?

#6

@twinstream Thanks!

OK, a couple of questions: it looks like there’s no difference between the behavior of your 1st item and your 3rd item (except for the animation style, that is). On the 2nd item, it only animates when I mouse over the title itself, not its parent element. Is that intentional, or were those all supposed to work differently?

My other question is whether I could peek at the code or BSS settings used to generate this.

#7

Should be now working :ok: