Creating Smooth Hover Effects for Menu Icons
Tags: frontend, webdev, css
Published: 2024-06-05 04:55:51

---
title: Creating Smooth Hover Effects for Menu Icons
published: true
description: In this blog post, I explore how to enhance your website's menu by adding animations to icons using CSS transitions. I provide a step-by-step guide, starting with a simple CSS solution and moving to a more refined approach using the transition and transform properties. By following this tutorial, you'll learn how to create smooth, visually appealing hover effects for your menu icons, making your website more interactive and engaging.
tags: frontend, webdev, css
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-06-05 04:53 +0000
---

It's been a while since I worked with stylesheets. I have always been a software developer focused mostly on backend functionality. Recently, however, I started using the [Bear blogging platform](https://bearblog.dev/) for [my personal website](https://yordi.me/), which allows you to customize its built-in themes.

The menu of my website is a collection of icons that link to different pages. For example, ✍️ points to a page with an overview of all my blog posts. My goal for this and other menu icons was to animate them on hover, so they scale up.

## A Simple Solution

In its basic form, the HTML of the menu looks like this:

```html
<nav>
  <a href="/blog/">✍️</a>
  <a href="/music/">🎼</a>
</nav>
```

Of course, I could do something simple (and probably not very professional) in CSS like this:

```css
nav a {
  text-decoration: none;
}

nav a:hover {
  font-size: 1.5em;
}
```

Check out this example in CodePen:
{% codepen https://codepen.io/Froodooo/pen/YzbVLMZ %}

This works, but it's far from ideal:
- There is no animated transition; a menu item immediately grows in size on hover and shrinks back on unhover.
- Surrounding menu items move around on hover.

## Working with Transitions

A better way to create good-looking animations for your menu is by using `transition`. With a transition, you can define which properties of an element will be animated. This `transition` property is placed on the main element (not on the `:hover` selector). Then, on the `:hover` selector, you can use the `transform` property to define the type of animation on hover.

In my case, the stylesheet looks like this:

```css
nav a {
  display: inline-block;
  text-decoration: none;
  transition: transform .3s ease-in-out;
}

nav a:hover {
  transform: scale(1.5);
}
```

I'll explain each part below:
- The transition animation only works for block elements, not for inline elements. So, I need to ensure that the CSS handles my `a` tags as blocks with `display: inline-block`.
- `transition: transform .3s ease-in-out` means that a `transition` is applied to the `transform` property, the animation takes `.3` seconds, and the animation is triggered both on hover and unhover.
- `transform: scale(1.5)` defines the type of transition. In this case, it scales my menu icons by a factor of `1.5`.

Check out this example in CodePen:
{% codepen https://codepen.io/Froodooo/pen/PovmaPR %}

For more options and transformation effects, check out the documentation for the [transition property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) and the [transform property](https://developer.mozilla.org/en-US/docs/Web/CSS/transform).