CODEWITHSUNDEEP
csssvg
cerealex
cerealex

Reputation: 1691

Transitioning hover off svg paths

Just wondering how to make a svg path transition ease back to its default position on hover off.

<svg>
 <path></path>
</svg>

CSS:

svg path{ transition: transform 0.5s ease; transform: none}
svg:hover path{ transition: transform 0.5s ease; transform: translateY(10px)}

This only works for the hover however, not for the hover off.

Upvotes: 0

Views: 80

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

It works for me, of course your hover off is applied to the whole svg in your question. Don't you just want to apply it to the path?

svg path{ transition: transform 0.5s ease; transform: none}
svg path:hover{ transition: transform 0.5s ease; transform: translateY(10px)}
<svg>
 <path stroke="black" stroke-width="15" pointer-events="all" d="M20 20l50 0"></path>
</svg>

Upvotes: 1

Related Questions