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.

Create a Hover Effect

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

Hover Effect in Sketch


  • For better results, get to know animation variables such as Curve, Delay, and Duration
  • Add Delay or make Duration longer if the animation happens too fast or even before you fully scroll past it

Hover Effect Examples

Hover Effect Example