CODEWITHSUNDEEP
csscss-transitions
greedsin
greedsin

Reputation: 1270

Image animation with clip-path

Here is a demo of my problem : Demo

I have two absolute images and each of them animates clip-path. While second comes after first in the DOM I can see the hover animation. But I cant see the hover animation of first. So my idea was that whenever I hover first I also hover second by the amount first hovers. So basically:

So far I tried the + connector, so for example:

.first:hover + .second {
}

But this will animate the second if I hover the first, so this does not help. Any Ideas?

Upvotes: 0

Views: 402

Answers (1)

Kosh
Kosh

Reputation: 18413

Your idea is right:

.first:hover + .second {
    -webkit-clip-path: polygon(100% 0, 90% 0, 50% 100%, 100% 100%);
    clip-path: polygon(100% 0, 90% 0, 50% 100%, 100% 100%);
}

Fiddle: https://jsfiddle.net/sb4bk0xg/3/

Upvotes: 1

Related Questions