can not animate sibling element

Question

Well, I've got div with 3 elements in it:

<div> 
    <img src="http://localhost/images/4.png" alt="alt 4" class="background">
    <img src="http://localhost/images/4_icon.png" alt="alt 4" class="icon">
    <p>
        bla bla
    </p>
</div>

and css such as:

.icon:hover ~ .background {
    transform: scale(1.2)
}

but no idea why, it doesn't work.

okay my fault it does, but what to do if I want to animate previous element? is there a way without using javascript? — miloszowi, Sep 13 '18 at 12:15
You can solve it with flexbox/grid and the order property. p.s. Your profile pic is creepy. — VXp, Sep 13 '18 at 12:16

score 0 · Answer 1 · answered Sep 13 '18 at 12:20

Just switch the icon with the background element. The tilde only works on the next elements. See example below. The other solution would be using js.

<div> 
    <img src="http://localhost/images/4_icon.png" alt="alt 4" class="icon">
    <img src="http://localhost/images/4.png" alt="alt 4" class="background">
    <p>
        bla bla
    </p>
</div>

can not animate sibling element

1 Answers1