All Collections
Designer's Guide to Anima
How To Create Hover Effects In Adobe XD
How To Create Hover Effects In Adobe XD

Enhance your site with interactive, eye-catching hover effects using Anima

Andres Raul Leon Bal avatar
Written by Andres Raul Leon Bal
Updated over a week ago

Hover Effects

A Hover Effect happens when the visitor hovers their mouse over a specific element and the element responds with transition effects. In this guide, we will show you how to create beautiful and eye-catching hover effects by using the Anima plugin within Adobe XD!

Create a Hover Effect in Adobe XD:

  1. Select the layer(s) you want to add the effect to

  2. In the Anima plugin, choose 'Hover effects' and select the desired effect, or enter your own CSS transition

    1. Hover effects include 'change color', 'grow', 'shadow', 'rotate' and more ๐Ÿš€!

  3. The animated preview will show you how it looks๐Ÿ‘Œ๐Ÿผ

  4. Click Save

See it in action!

Get involved in our Anima Community Forum!

New to Anima?

Learn More

Did this answer your question?