Transition your CSS hovers

The hover selector in CSS is a very well known selector, it can do great things for when your mouse hovers over an element. However this snpappy change can be quite off putting or startling.

This is were transition helps, by bringing in your changes on hover state over the span of a set time amount rather than instantly.

Take this example, a hover without a transition

To a hover with a transition

I used

.element {
       /* styles */        transition: .6s linear;
}

.element:hover {
      /* border changes etc */        transition: .6s linear;
}

Putting a transition in the non hover element style makes it ease back into its non hover state.

Make sure to read up on the transition docs. There is plenty more to know and use like delays, applying only to certain properties and timings.