Web Development: How to Create 9 Different CSS Hover Effects From Scratch

How to Create 9 Different CSS Hover Effects From Scratch

In this updated tutorial, we’re going to create seven different CSS hover effects and two additional ones that will require a little JavaScript. We’ll learn loads along the way, including how to animate font icons, borders, SVG paths, and work with Lottie animations. You’ll be able to apply these hover effects to all kinds of situations. Let’s dive in!

Just to give you an idea of what you’ll learn during this tutorial, check out one of the demos we’ll be building:

Let’s start with this one, see you in the first step...

1. Revealing Icon CSS Hover Effect

In this first example, we’ll explore the demo you’ve already seen: a hover effect where text is replaced by an icon with slide animation.

Start with the Page Markup

We’ll start with a plain unordered list which will represent a typical page menu. Each menu link will include two span elements. The first span will contain the anchor text, while the second one will hold a Font Awesome icon:

<ul class="menu">
  <li>
    <a href="#0">
      <span>About</span>
      <span>
        <i class="fas fa-address-card" aria-hidden="true"></i>
      </span>
    </a>
  </li>
  <li>
    <a href="#0">
      <span>Projects</span>
      <span>
        <i class="fas fa-tasks" aria-hidden="true"></i>    
      </span>
    </a>
  </li>
  ...
</ul>

Specify the Styles

The list will be a flex container with horizontally centered content:

.menu {
  display: flex;
  justify-content: center;
}

Note: this basis style will be added to all the demos we build, so we won’t discuss it again. The demo also has some aesthetic styles we’ll reuse every time (such as the dark background etc.) that you can copy from the CodePen demo.

The first span in each item will have some padding around it:

.menu a span:first-child {
  display: inline-block;
  padding: 10px;
}

Then the second span will be absolutely positioned and hidden by default. Plus, its icon will be horizontally and vertically centered:

.menu a {
  display: block;
  position: relative;
  overflow: hidden;
}

.menu a span:last-child {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-100%);
}

Each time we hover over a link, its text will disappear. On the other hand, at that point, the associated icon will become visible:

.menu a span {
  transition: transform 0.2s ease-out;
}

.menu a:hover span:first-child {
  transform: translateY(100%);
}

.menu a:hover span:last-child {
  transform: none;
}

Happily enough, there’s the option to modify the direction of the slide animations according to our needs. By default during the hover animation, the icon will appear from top to bottom, while the text will be moved to the bottom. To change that behavior, we have to pass the data-animation attribute to the target list. Possible values are to-top, to-right, and to-left.

The corresponding styles are shown below:

.menu[data-animation="to-top"] a span:last-child {
  transform: translateY(100%);
}

.menu[data-animation="to-top"] a:hover span:first-child {
  transform: translateY(-100%);
}

.menu[data-animation="to-right"] a span:last-child {
  transform: translateX(-100%);
}

.menu[data-animation="to-right"] a:hover span:first-child {
  transform: translateX(100%);
}

.menu[data-animation="to-left"] a span:last-child {
  transform: translateX(100%);
}

.menu[data-animation="to-left"] a:hover span:first-child {
  transform: translateX(-100%);
}

Here’s the full CodePen demo that summarizes the aforementioned cases:

2. Revealing Swipe CSS Hover Effect

In this second example, we’ll continue with another hover effect where text is replaced by a Font Awesome icon. But, this time, the replacement will happen in the background and won’t be visible to us, thanks to a “swipe” that happens in the foreground.

Specify the Page Markup

As ever, we’ll start with an unordered list that will contain the page links. In this case, though, each of our links will have a data-icon attribute. The value of this attribute will match the Unicode representation of a Font Awesome icon:

<ul class="menu">
  <li>
    <a href="#0" data-icon="&#xf2bb;">
      About
    </a>
  </li>
  <li>
    <a href="#0" data-icon="&#xf0ae;">
      Projects
    </a>
  </li>
  ...
</ul>

Specify the Styles

We’ll then define the ::before and ::after pseudo-elements of all links.

The ::before pseudo-element will be positioned in the center of the link, though it will initially be invisible.
The ::after pseudo-element will cover the full link dimensions, but it will also be hidden by default. Its content will hold a Font Awesome icon stored in the relevant data-icon attribute:

:root {
  ...
  --text-color: #aaaebc;
  --timing-function: cubic-bezier(0.82, 0.2, 0.42, 1);
}

.menu a {
  position: relative;
  overflow: hidden;
}

.menu a::before,
.menu a::after {
  position: absolute;
  left: 0;
  width: 100%;
}

.menu a::before {
  content: "";
  top: 50%;
  transform: translate(-101%, -50%);
  height: 50%;
  z-index: 1;
  background: var(--text-color);
}

.menu a::after {
  content: attr(data-icon);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-color);
  opacity: 0;
}

Each time we hover over a link, first the ::before pseudo-element will quickly appear. Then, it will be moved to the right and the icon will appear. During that time, the anchor text color will set to transparent.

To achieve this precise timing synchronization, we have to customize the transitions' speed. For instance, we’ll add delays to the links as well as their ::after pseudo-element:

/*CUSTOM VARIABLES HERE*/

.menu a {
  transition: color 0s 0.25s var(--timing-function);
}

.menu a::before {
  transition: transform 0.5s var(--timing-function);
}

.menu a::after {
  transition: opacity 0s 0.25s var(--timing-function);
}

.menu a:hover {
  color: transparent;
}

.menu a:hover::before {
  transform: translate(101%, -50%);
}

.menu a:hover::after {
  opacity: 1;
}

If you prefer a reversed animation, just add the data-animation="to-left" attribute to the corresponding list.

Here’s the CodePen demo that covers both cases:

3. Animated Underline CSS Hover Effect

In our third example, we’ll look at a common hover effect where an underline is revealed with slide animation.

Specify the Page Markup

We’ll start with an unordered list that will store the page links:

<ul class="menu">
  <li>
    <a href="#0">
      About
    </a>
  </li>
  <li>
    <a href="#0">
      Projects
    </a>
  </li>
  ...
</ul>

Specify the Styles

We’ll then define the ::before pseudo-element for all the links. We’ll place it to the bottom of its container and give it translate: scaleX(0), so it will initially be hidden.

In addition, we’ll apply transform-origin: left to it because we want the animation to start from left to right:

.menu a {
  position: relative;
}

.menu a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #b47dcd, #e878a2, #eb85ab);
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease-in-out;
}

Each time we hover over a link, its pseudo-element will appear:

.menu a:hover::before {
  transform: scaleX(1);
}

Similar to the previous example, we have the option to change the direction of the slide animation. The line will appear from left to right by default, but to change that behavior, we have to pass the data-animation attribute to the target list. Possible values are to-left and center.

The corresponding styles are as follows:

.menu[data-animation="to-left"] a::before {
  transform-origin: right;
}

.menu[data-animation="center"] a::before {
  transform-origin: center;
}

Bonus!

We can go things one step further and change the transform-origin property value of the pseudo-element depending on its state. This makes the underline appear from one side, and disappear from the other.

Here are the rules that implement this functionality:

.menu[data-animation="bonus"] a::before {
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
}

.menu[data-animation="bonus"] a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.82, 0.94);
}

Here’s the CodePen demo for the scenarios we discussed:

4. Multiline Animation CSS Hover Effect

Moving on, in this fourth example, we’ll cover a hover effect where multiple lines will be revealed sequentially. The beauty of this technique is that it will give us the impression that the border of the hovered element is being painted. How cool is that!

Note: this effect can also be achieved with SVG, and we’ll look at something similar in a later demo.

Specify the Page Markup

Again, our markup will consist of an unordered list. Each of the menu links will contain four empty span elements:

<ul class="menu">
  <li>
    <a href="#0">
      About
      <span class="border border-top"></span>
      <span class="border border-right"></span>
      <span class="border border-bottom"></span>
      <span class="border border-left"></span>
    </a>
  </li>
  ...
</ul>

Specify the Styles

The span elements will be absolutely positioned and hidden by default. However, their position and transform-origin will be different:

.menu .border {
  position: absolute;
  left: 0;
  background: currentColor;
}

.menu .border-top,
.menu .border-bottom {
  width: 100%;
  height: 1px;
  transform: scaleX(0);
}

.menu .border-left,
.menu .border-right {
  width: 1px;
  height: 100%;
  transform: scaleY(0);
}

.menu .border-top,
.menu .border-left,
.menu .border-right {
  top: 0;
}

.menu .border-bottom {
  bottom: 0;
  transform-origin: bottom right;
}

.menu .border-top {
  transform-origin: top left;
}

.menu .border-left {
  transform-origin: bottom left;
}

.menu .border-right {
  left: auto;
  right: 0;
  transform-origin: top right;
}

As we hover over a link, its spans will become visible sequentially, following a clockwise rotation. To do so, we’ll control when the second, third, and fourth spans become visible:

:root {
  ...
  --transition-duration: 0.2s;
  --transition-delay: 0.2s;
}

.menu .border {
  transition: transform var(--transition-duration) ease-in-out;
}

.menu a:hover .border-top,
.menu a:hover .border-bottom {
  transform: scaleX(1);
}

.menu a:hover .border-left,
.menu a:hover .border-right {
  transform: scaleY(1);
}

.menu a:hover .border-right {
  transition-delay: var(--transition-delay);
}

.menu a:hover .border-bottom {
  transition-delay: calc(var(--transition-delay) * 2);
}

.menu a:hover .border-left {
  transition-delay: calc(var(--transition-delay) * 3);
}

By modifying the transform-origin property value and canceling the delays of our elements, we can easily generate another nice effect.

To incorporate this effect in our menu, we have to append the data-animation="diagonal" attribute to it. This will result in the following CSS styles:

.menu[data-animation="diagonal"] .border-left {
  transform-origin: top left;
}

.menu[data-animation="diagonal"] .border-right,
.menu[data-animation="diagonal"] .border-bottom {
  transform-origin: bottom right;
}

.menu[data-animation="diagonal"] a:hover [class^=border]{
  transition-delay: 0s;
}

Take a look at the CodePen demo that gives us those effects:

5. Animated Circle SVG Hover Effect

In this fifth example, we’ll walk through a hover effect where an SVG path is animated, encircling our link. The technique we’re going to use isn’t something new; in actual fact, Jake Archibald wrote about it some years ago.

Specify the Page Markup

Once more, we’ll start with an unordered list, but this time we’ll include an SVG nested inside each link:

<ul class="menu">
  <li>
    <a href="#0">
      About
      <svg preserveAspectRatio="none" viewBox="0 0 546.714 178.143"><path d="M546.214 89.072c0 48.917-122.162 88.571-272.857 88.571C122.662 177.643.5 137.988.5 89.072.5 40.155 122.662.5 273.357.5c150.695 0 272.857 39.655 272.857 88.572z"/></svg>
    </a>
  </li>
  ...
</ul>

The SVG will be an ellipse and represented via the path element. We’ll give it preserveAspectRatio="none" because, as we’ll see in a moment, it should cover the full parent dimensions, even if it’s stretched.

Specify the Styles

The SVG will be absolutely positioned and centered within its container. Plus, as mentioned above, it will be big enough to cover the anchor text:

.menu a {
  position: relative;
}

.menu a svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  z-index: -1;
}

The path element will have a stroke and its fill color will be transparent:

.menu a svg path {
  fill: transparent;
  stroke-width: 5px;
  stroke: currentColor;
}

To animate the path, we’ll need two additional properties. Specifically, the stroke-dasharray and stroke-dashoffset properties.

The stroke-dasharray property is responsible for creating dashes/gaps in our stroke. For example, by setting stroke-dasharray: 50 to the path, it will look as follows:

The stroke-dashoffset property is responsible for changing the position (offsetting) of those dashes.

So here’s the trick:

First, the value of the stroke-dasharray property should match the length of the path. Instead of guessing it, JavaScript provides a handy way for grabbing it through the getTotalLength() method.
Next, we’ll also assign the resulting value (or its negative one for a reversed effect) to the stroke-dashoffset property. This neat combination will hide the SVG.
Then, each time we hover over a link, we’ll run an animation that will move the stroke-dashoffset property value to 0. As a result of that, the path will be gradually “drawn”.

With all the above in mind, let’s first retrieve the path’s length (just for the first path) via JavaScript:

document.querySelector("li:nth-child(1) path").getTotalLength();
//1210.709716796875;
// you might see slightly different values depending on your browser

Then, we’ll assign this value to the corresponding properties:

.menu a svg path {
  stroke-dasharray: 1210.709716796875;
  stroke-dashoffset: -1210.709716796875; /*or the positive one*/
  transition: stroke-dashoffset .5s cubic-bezier(.29,.68,.74,1.02);
}

.menu a:hover svg path {
  stroke-dashoffset: 0;
}

Lastly, as an improvement, instead of hard coding the stroke-dasharray and stroke-dashoffset values, we could have specified them dynamically through JavaScript (see if you can do that bit yourself!).

Here’s the final demo, which gives us a cool chalkboard hover effect:

6. SVG Wavy UnderLine Hover Effect

Now that we know the basic principles behind the SVG path animation, let’s have a quick look at two other very similar examples. In both examples, there won’t be any need to stretch the SVGs, so we won’t make use of the preserveAspectRatio="none" attribute.

The first one will reveal a wavy underline.

Here’s the demo:

7. Pointing SVG Arrow Hover Effect

The third SVG demo will reveal an Iconmonstr icon (a pointing arrow).

Here’s the demo for you to reverse engineer:

8. Lottie Animation Hover Effect

In this eighth example, we'll cover a hover effect where a Lottie animation is played infinitely. If you are unfamiliar with this concept, take some time to read this tutorial before continuing.

For this demo that will require some JavaScript, we'll use a free Lottie animation taken from the LottieFiles library and work with the LottieFiles web player. If you haven't used this player before, don't worry. There's also a dedicated tutorial that describes all the steps needed to incorporate it into a project. Be sure to read it first, then come back.

The animation in action

Specify the Page Markup

We’ll start with the usual unordered list. Each of the menu links will contain the same lottie-player custom element:

<ul class="menu">
  <li>
    <a href="#0">
      About
      <lottie-player src="https://assets8.lottiefiles.com/datafiles/B1zOc97lUJINcA2/data.json" style="width: 140px; height: 140px;" loop></lottie-player>
    </a>
  </li>
  <li>
    <a href="#0">
      Projects
      <lottie-player src="https://assets8.lottiefiles.com/datafiles/B1zOc97lUJINcA2/data.json" style="width: 140px; height: 140px;" loop></lottie-player>
    </a>
  </li>
  <li>
    <a href="#0">
      Clients
      <lottie-player src="https://assets8.lottiefiles.com/datafiles/B1zOc97lUJINcA2/data.json" style="width: 140px; height: 140px;" loop></lottie-player>
    </a>
  </li>
  <li>
    <a href="#0">
      Contact
      <lottie-player src="https://assets8.lottiefiles.com/datafiles/B1zOc97lUJINcA2/data.json" style="width: 140px; height: 140px;" loop></lottie-player>
    </a>
  </li>
</ul>

Notice that we give this element fixed dimensions (140px x 140px). Feel free to make it bigger or smaller depending on your needs.

Specify the Styles

The lottie-player will be absolutely positioned and centered within its container. Plus, it will be hidden by default:

.menu a {
  position: relative;
}

.menu a lottie-player {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
}

.menu a lottie-player.visible {
  visibility: visible;
}

Add the JavaScript

Each time we hover over a link, its associated animation will appear thanks to the visible class and play:

const links = document.querySelectorAll(".menu a");
const visibleClass = "visible";

links.forEach((link) => {
  link.addEventListener("mouseenter", function () {
    const player = this.querySelector("lottie-player");
    player.classList.add(visibleClass);
    player.play();
  });

  link.addEventListener("mouseleave", function () {
    const player = this.querySelector("lottie-player");
    player.classList.remove(visibleClass);
    player.stop();
  });
});

Here’s the related demo:

9. Lottie Animation With Random Color Hover Effect

In this last example, we'll continue our exploration in the Lottie animations world. This time though, some things will change during the hover effect. That said, the animation will appear yet also receive a random color coming from an array of colors.

Again, for this demo that will require some JavaScript, we'll use a free Lottie animation taken from the LottieFiles library and work with the LottieFiles web player.

The animation in action

Specify the Page Markup

Once again, we'll start with the usual unordered list and the same lottie-player custom element inside each link:

<ul class="menu">
  <li>
    <a href="#0">
      About
      <lottie-player preserveAspectRatio="none" src="https://assets4.lottiefiles.com/packages/lf20_1wDQvS.json" loop></lottie-player>
    </a>
  </li>
  <li>
    <a href="#0">
      Projects
      <lottie-player preserveAspectRatio="none" src="https://assets4.lottiefiles.com/packages/lf20_1wDQvS.json" loop></lottie-player>
    </a>
  </li>
  <li>
    <a href="#0">
      Clients
      <lottie-player preserveAspectRatio="none" src="https://assets4.lottiefiles.com/packages/lf20_1wDQvS.json" loop></lottie-player>
    </a>
  </li>
  <li>
    <a href="#0">
      Contact
      <lottie-player preserveAspectRatio="none" src="https://assets4.lottiefiles.com/packages/lf20_1wDQvS.json" loop></lottie-player>
    </a>
  </li>
</ul>

However, this time our animation won't contain fixed dimensions. It should cover the full parent dimensions, even if it’s stretched. That's the reason why we give preserveAspectRatio="none" to the custom element.

Specify the Styles

The lottie-player will be absolutely positioned and hidden by default:

.menu a {
  position: relative;
}

.menu a lottie-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.menu a lottie-player.visible {
  visibility: visible;
}

Add the JavaScript

Each time we hover over a link, its associated animation will appear thanks to the visible class and play. Additionally, the animation will receive a random color selection from the arrayOfColors array:

const links = document.querySelectorAll(".menu a");
const visibleClass = "visible";
const arrayOfColors = [
  "chartreuse",
  "gold",
  "forestgreen",
  "crimson",
  "tomato",
  "wheat",
  "pink",
  "yellow",
  "ivory",
  "bisque",
  "snow",
  "lightcyan",
  "lightyellow",
  "linen",
  "mintcream",
  "pink"
];

function getRandomColor() {
  const arrayLength = arrayOfColors.length;
  const randomValue = Math.random() * arrayLength;
  const roundedNumber = Math.floor(randomValue);
  const color = arrayOfColors[roundedNumber];
  return color;
}

links.forEach((link) => {
  link.addEventListener("mouseenter", function (e) {
    const player = this.querySelector("lottie-player");
    player.shadowRoot.querySelector("path").style.fill = getRandomColor();
    player.classList.add(visibleClass);
    player.play();
  });

  link.addEventListener("mouseleave", function () {
    const player = this.querySelector("lottie-player");
    player.classList.remove(visibleClass);
    player.stop();
  });
});

Tip: remember that the lottie-player is a custom element. To change its color, we have to modify the fill value of its path element. But, we cannot directly target this element by using JavaScript's standard traversing methods. To gain this ability, we have first to target the player's contents by using the ShadowRoot interface and more specifically its shadowRoot property.

Here’s the related demo:

Conclusion

That concludes another tutorial, folks! It was quite a long journey, but I hope that you enjoyed it and have learned some new things which you will include in your front-end toolkit.

Last but not least, I have added all the demos of this tutorial to a CodePen Collection. Be sure to check it out and give it some love!

I’d love to see your favorite CSS hover effects. They can come from CodePen, an inspirational website, or somewhere else. Don’t forget to share them with us!

As always, thanks a lot for reading!