Anima

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!

<b>Create a Hover Effect in Adobe XD:</b>

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

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 🚀!

The animated preview will show you how it looks👌🏼

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

Preview Live Website: <a href="https://quiet-band-0580.animaapp.io/indi-desktop-1440?r=1&amp;p=iku9Vaz&amp;h=indi-desktop-1440&amp;pages=WyJpbmRpLXRhYmxldC03NjgiLCJpbmRpLWRlc2t0b3AtMTQ0MCIsImluZGktbW9iaWxlLTM3NSJd" target="_blank" rel="nofollow noopener noreferrer">[Open]</a>

- Preview Live Website: <a href="https://quiet-band-0580.animaapp.io/indi-desktop-1440?r=1&amp;p=iku9Vaz&amp;h=indi-desktop-1440&amp;pages=WyJpbmRpLXRhYmxldC03NjgiLCJpbmRpLWRlc2t0b3AtMTQ0MCIsImluZGktbW9iaWxlLTM3NSJd" target="_blank" rel="nofollow noopener noreferrer">[Open]</a>
   

___________________________________________________________

Get involved in our <a href="https://forum.animaapp.com/" target="_blank" rel="nofollow noopener noreferrer">Anima Community Forum</a>!

<a href="https://projects.animaapp.com/signup" target="_blank" rel="nofollow noopener noreferrer">Create an account for free!</a>

Learn more about using Anima with <a href="https://www.animaapp.com/figma" target="_blank" rel="nofollow noopener noreferrer">Figma</a>, <a href="https://www.animaapp.com/xd" target="_blank" rel="nofollow noopener noreferrer">XD</a> and <a href="https://www.animaapp.com/sketch" target="_blank" rel="nofollow noopener noreferrer">Sketch</a>

<a href="https://support.animaapp.com/en/articles/2350134-how-to-download-the-anima-plugin-for-sketch-adobe-xd-or-figma" target="_blank">How to Download the Anima Plugin</a>

- <a href="https://projects.animaapp.com/signup" target="_blank" rel="nofollow noopener noreferrer">Create an account for free!</a>
- Learn more about using Anima with <a href="https://www.animaapp.com/figma" target="_blank" rel="nofollow noopener noreferrer">Figma</a>, <a href="https://www.animaapp.com/xd" target="_blank" rel="nofollow noopener noreferrer">XD</a> and <a href="https://www.animaapp.com/sketch" target="_blank" rel="nofollow noopener noreferrer">Sketch</a>
- <a href="https://support.animaapp.com/en/articles/2350134-how-to-download-the-anima-plugin-for-sketch-adobe-xd-or-figma" target="_blank">How to Download the Anima Plugin</a>

<a href="https://app.intercom.com/a/apps/id43h9l8/articles/articles/2621449/show" target="_blank" rel="nofollow noopener noreferrer">Add Forms and Real Text Inputs to Designs</a>

<a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima" target="_blank">How to Publish a Website and Host it With Anima</a>

- <a href="https://app.intercom.com/a/apps/id43h9l8/articles/articles/2621449/show" target="_blank" rel="nofollow noopener noreferrer">Add Forms and Real Text Inputs to Designs</a>
- <a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima" target="_blank">How to Publish a Website and Host it With Anima</a>

Hover Effects

New to Anima?

Learn More