0

Landing Page Screenshot

I am trying to create an animation (i.e., transformation) on an element that is triggered by hovering over a separate element. In this case, when the user hovers over the button "Learn More", the top left icon slides right.

This is the part where I might sound stupid so please forgive me:

I named the button class

.learnmore

and the icon

.graphic1

I used the inspect tool and found that the button is (I think):

.elementor-button-wrapper

but it seems to trigger the effect on the entire "row"? I suppose that is what a wrapper is...(so on a side note, I also need help getting the effect to apply when only hovering on the actual button itself lol).

The inspect tool also showed the icon as being (once again, I think):

.elementor-icon

I somehow managed to create motion effects on both the icon and button when hovering on each of their classes respectively:

.learnmore:hover
        .elementor-button-wrapper{
        transform: translateX(1em); 
        }

 .graphic1:hover
        .elementor-icon{
        transform: translateX(1em); 
        }

But I can't figure out how to get motion on .graphic1 when hovering on .learnmore.

I thought I could just copy the icon effect and put it under the button class but that didn't work either:

.learnmore:hover
        .elementor-icon{
        transform: translateX(1em); 
        }

I imagine it has something to do with the elements not being related? I read that they have to be siblings or be a parent-child (once again, I have no idea what I am talking about).

Kevin M. Mansour
  • 2,915
  • 6
  • 18
  • 35
The Dark Knight
  • 1
  • 1

1 Answers1

0

Without your HTML, it's hard to say if this can be solved using pure CSS or if JavaScript is required.

You can try using CSS Combinators, the general sibling combinator may work in your case. There's also a Stackoverflow question I found which has both a pure CSS implementation as well as a JS version.

Liam Stojanovic
  • 36
  • 4