Categories
Tutorials

Create Animated Hover Effect using CSS

Animated hover effect or animated drop down menu. Why I have wrote two different things together that’s because today I’ll show you how with the simple use of css generated content we can achieve both of  the aforementioned effects.

View Demo

Today we are going to look at two different effects achieved using the same technique. For instance, before the advent of css animations we had (and we still) to rely on JavaScript for animated menus. CSS level 3 came up with animations, transition and transform property which are better performance wise than JavaScript animations. Although there are some JavaScript workaround like use requestAnimationFrame rather then setTimeout or setInterval.

Speaking of hover effects, I do remember the days when we had to switch different images for different state of links. And use Photoshop to slice and dice a button according to different situation before it was ready for production use.

Animated Hover Effect

For this demonstration, we will be using the most generic menu. A menu that can be found in any website. Starting off with the html as:

<h1>Animated Hover Effect</h1>
<nav class="animated-menu">
   <ul>
      <li><a href="#">Home</a>
      <li><a href="#">About</a>
      <li><a href="#">Work</a>
      <li><a href="#">Contact</a>
   </ul>
</nav>

I have deliberately left out the end tags for list items just to fight out the space between inline-block elements.

Layout for our Animated Hover Effect

.animated-menu ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.animated-menu li{
  display: inline-block;
  font-size: 0;
  position: relative;
}

.animated-menu a{
  display: block;
  text-decoration: none;
  color: #fff;
  position: relative;
  padding: 10px 15px;
  margin: 0;
  z-index: 5;
  font-size: 16px;
}

The first rule set, resets unordered list. We altered the default appearance of list-items by displaying them side by side rather stack on top of each other. The other point of interest is that z-index which is set to 5. That’s because we want to ensure that animation will happen right behind the current menu item.

The Magic Spell

.animated-menu a::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: #c65b04;
  left: 0;
  transform: scaleY(0);
  transform-origin: 0 0;
  z-index: -1;
  transition: all 0.2s ease-in;
}

.animated-menu a:hover::before {
  transform: scaleY(1);
}

Looking at above code, css generated content is used to add animated hover effect to our menu. The generated content is nothing but a rectangle whose width and height is equal to that of menu item that is currently hoveredIt scales or in other words, it’s height is changed from 0 to 100% using transform scaleY property. The origin is by default set to center but here it’s moved to the top because we want the scaling to happen from top not from the center.

Now while writing code for animated hover effect, I also realized that we can apply same concept to get a slideDown effect. slideDown or slideToggle are also happened to be functions of jQuery. I was blown away when I discovered them for the first time. How they can be achieved via CSS, that is next.

Animated Drop Down Menu

<h1>Animated Drop Down Effect</h1>
    <nav class="dropdown-menu">
      <ul>
        <li><a href="#">Home</a>
        <li><a href="#">About</a>

        <li class="drop-down"><a href="#">Work <span class="down-arrow">&dtrif;</span></a>
          <ul>
            <li><a href="#">Graphic</a></li>
            <li><a href="#">Web</a></li>
            <li><a href="#">Animations</a></li>
            <li><a href="#">Work 4</a></li>
            <li><a href="#">Work 5</a></li>
            <li><a href="#">Work 6</a></li>
          </ul>
          </li>
        <li><a href="#">Contact</a>
      </ul>
    </nav>

The HTML is no different but with the addition of drop down menu. The list-item that contain a sub menu is given the class of “drop-down” for quick css selection.

.drop-down ul{
  position: absolute;
  background:#000;
  transform-origin:0 0;
  transform: scaleY(0);
  transition: all 0.5s ease-in-out;
}

.drop-down:hover ul{
  transform: scaleY(1);
}

This time we are dealing with actual content not a CSS generated content. Here we are doing the same trick. Hovering on list-item with sub menu, a nested unordered list reveals and slide down in a nice fashion. The speed of sliding can be controlled fiddling with CSS transition property.

Conclusion

With the usage of two simple property we have managed to cause animated hover effect and animated drop down menu. Go ahead and change scaleY to scaleX  to slide the content from left or it can be reversed with the use of rotate property. I am looking forward to all of your nice effects that you have achieved just by fiddling with transform property.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.