Hover Effects

Adding hover effects to a web site is a great way to draw the attention of the users and make the website to be more engaging.

Hover Effect Example

Watch Hover Effects Video Tutorial.

Create a Hover Effect

  1. Select the layer(s) you want to add the effect to
  2. In Prototype, expand the Smart Layers section, and click Hover Effect
  3. Select the desired Hover effect, or enter your own CSS transition
  4. Click Save

TIP:

Hover Effect in SketchPreview Live Website: Open
Sketch Sample File: [Download]


Hover Effect Examples

Hover Effect Example