Is it possible for hover to have two or more rules

Question

https://code.sololearn.com/Wddl7VTiexd5/?ref=app

Answer 1

You can try animation in combination with hover, where hover also sets the final result of animation.

Like this :-

https://code.sololearn.com/WSiAv40o3WFb/?ref=app

Answer 2

have you tried putting the transform functions together?

.line
div:nth-child(2):hover {
transform: translate(70px, -15px) scale(1.1) rotate(360deg);
background-color: red;
}

Answer 3

Alex Wairegi
what you tried was two separate transforms. only the last one will be applied if you do that.

don't do:
transform:translate(70px,-15px);
transform:scale(1.1);

but do this instead:
transform:translate(70px,-15px) scale(1.1);

Answer 4

Bob_Li
Yes I already did that I had commented it .It's not giving the desired result . I want it to transform translate and enlarge in that order