DEV Community

Cover image for Smooth Hover Transitions Using CSS
Amy Oulton
Amy Oulton

Posted on

Smooth Hover Transitions Using CSS

#css #codenewbie #tutorial #programming

It's standard practice across websites that hovering over certain components like links and buttons will cause them to change their appearance. Usually, it's something slight like adding an underline on a link, or altering the opacity of the text.

There is a built in method you're likely familiar with where you add these desired styles.

Standard Hover Transitions

Let's say we have a class of .btn. Let's say it looks something like the following:

Screen Shot 2021-09-22 at 12.40.06 PM

Our HTML looks like this:

  <body>
    <div class="container">
      <button class="btn">Click Me</button>
    </div>
  </body>
Enter fullscreen mode Exit fullscreen mode

Our stylesheet looks like this currently:

  .btn {
    padding: 4px 8px;
    background-color: red;
    border-radius: 4px;
    border: none;
  }
Enter fullscreen mode Exit fullscreen mode

If we wanted to add a standard hover method that changes the background colour when we hove over it, we would make a new addition to our stylesheet that looks like the following:

 .btn:hover {
   background-color: rosybrown;
 }
Enter fullscreen mode Exit fullscreen mode

The :hover specifies that the proceeding styles are applied when the hover actions occur on the class listed before the :.

Adding this results in the following:

Hover GIF

As you can see, it works perfectly fine, but it's choppy and not as smooth as we would love.

Smooth Transition

We're going to change up how we apply this method. We're going to remove the above :hover addition completely and we will actually be making use of the transition method within the btn class.

Want to see how we've done it? Visit the tutorial on CodeCast to see the full tutorial and code. You don't need an account and it's free, so feel free to check it out!

If you do make an account on CodeCast be sure to give me a follow to stay up to date with the latest tutorials I put out.

Let me know what you think of this method and if you have any other ways of creating smooth transitions that stand out to you!

Top comments (1)

Collapse
 
stackedboost profile image
Peter Hallander •

Nice intro. One thing worth knowing when choosing which CSS properties to transition: not all properties have the same performance cost.

Properties like background-color, border, padding, and margin trigger layout recalculation or repaint, which can cause jank on lower-end devices. The properties that transition cheaply — because they're handled on the compositor thread and don't require the main thread — are transform, opacity, and filter.

So if you want silky smooth hover transitions without any main-thread work, the gold standard is:

.btn {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn:hover {
  opacity: 0.8;
  transform: scale(1.02);
}
Enter fullscreen mode Exit fullscreen mode

Combining opacity and filter is also powerful for image hover effects. For example, filter: grayscale(1) → filter: grayscale(0) on hover gives you a color-reveal transition that's completely GPU-composited. I use this pattern in a Shopify app (Eye Catching on the Shopify App Store) for partner logo displays — the grayscale-to-color reveal on hover is smooth at any frame rate because the GPU handles it entirely.