Simple hover effect with CSS

Simple hover effect with CSS

There are a lot of articles on the internet about different CSS hover effects which are very useful and you don’t need javascript to make it work and look good. CSS3 introduced a lot of functionality and we should use them cause we need to update our knowledge in order no to get stuck in one place when it comes to web development.

Simple hover effects

In this post, we will make simple CSS hover effects with :before and :after pseudo elements. First, let’s start to understand what :before and :after pseudo elements really are! In short, these are Content-related pseudo “elements”.

:before – Is able to add content before a certain element. For example, adding an opening quote before a blockquote or perhaps a preceding image to set apart a particular paragraph.

:after – Is able to add content after a certain element. For example, a closing quote to a blockquote. Also used commonly for the clearfix, where an empty space is added after the element which clears the float without any need for extra HTML markup.

Let’s code something

Now that we know what are pseudo elements we can make something really simple but effective with them. Let’s prepare a HTML document and write the markup first.

 

Summary
Simple hover effect with CSS
Article Name
Simple hover effect with CSS
Description
CSS3 introduced a lot of functionality and we should use them cause we need to update our knowledge in order no to get stuck in one place when it comes to web development.
Author
Publisher Name
Responsive-web.site
Publisher Logo
<nav>
  <ul>
    <li><a href="#" class="from-left">From Left</a></li>
    <li><a href="#" class="from-right">From Right</a></li>
    <li><a href="#" class="from-left-right">From Left and Right</a></li>
    <li><a href="#" class="from-top">From Top</a></li>
    <li><a href="#" class="from-bottom">From Bottom</a></li>
    <li><a href="#" class="from-middle">From Middle</a></li>
  </ul>
</nav>

So, we have a nav and inside that a ul tag which has six li elements with a tag inside. As we have our markup we can continue with some CSS. At the end of this post you will be able to see the live demo as well.

The CSS part

First we gone write the basic code to make our markup look good.

nav {
  padding: 15px;
  background: #fff;
  max-width: 250px;
  margin: auto;
  -moz-box-shadow: 0 0 15px 4px rgba(0,0,0,.2);
  -o-box-shadow: 0 0 15px 4px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 0 15px 4px rgba(0,0,0,.2);
  box-shadow: 0 0 15px 4px rgba(0,0,0,.2);
}

ul {
  list-style: none;
  text-align: center;
  padding: 0; margin: 0;
}
		
li {
  display: block;
  margin: 15px;
}
		
a {
  display: block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 1.2em;
  background-color: #f1f1f1;
  color: #000;
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-decoration: none;
  -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,.3);
  -o-box-shadow: 0 8px 6px -6px rgba(0,0,0,.3);
  -webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,.3);
  box-shadow: 0 8px 6px -6px rgba(0,0,0,.3);
 }
		
a:before, a:after {
  content: '';
  z-index: -1;
  position: absolute;
  margin: auto;
  background: #ffc602;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

We can use SASS as well to write our CSS but let’s keep it simple for now, maybe one of you don’t know what SASS is. If you’re not familiar with SASS then please take a look at our previous article here.

So now we can make the hover effects for our elements. At the bottom of this article, you can have a look at the live demo as well.

/* FROM LEFT */
.from-left:before {
  left: -20%; top: 0;
  width: 0; height: 150%;
  -moz-transform: skew(40deg);
  -o-transform:skew(40deg);
  -webkit-transform: skew(40deg);
  transform: skew(40deg);
}
		
.from-left:hover:before {
  width: 75%;		
}
		
/* FROM RIGHT */
.from-right:before {
  right: -20%; top: 0;
  width: 0; height: 150%;
  -moz-transform: skew(40deg);
  -o-transform:skew(40deg);
  -webkit-transform: skew(40deg);
  transform: skew(40deg);
}
		
.from-right:hover:before {
  width: 70%;		
}
		
/* FROM LEFT AND RIGHT */
.from-left-right:before {
  left: -20%; top: 0;
  width: 0; height: 150%;
  -moz-transform: skew(40deg);
  -o-transform:skew(40deg);
  -webkit-transform: skew(40deg);
  transform: skew(40deg);
}
		
.from-left-right:hover:before {
  width: 75%;
}
		
.from-left-right:after {
  right: -20%; top: 0;
  width: 0; height: 150%;
  -moz-transform: skew(40deg);
  -o-transform:skew(40deg);
  -webkit-transform: skew(40deg);
  transform: skew(40deg);
}
		
.from-left-right:hover:after {
  width: 75%;
}
		
/* FROM TOP */
.from-top:before {
  width: 100%;
  height: 0;
  left: 0; 
  top: 0;
}
		
.from-top:hover:before {
  height: 100%;		
}
		
/* FROM BOTTOM */
.from-bottom:before {
  width: 100%;
  height: 0;
  left: 0; 
  bottom: 0;
}
		
.from-bottom:hover:before {
  height: 100%;		
}
		
/* FROM MIDDLE */
.from-middle:before {
  left: 0; right: 0; bottom: 0; top: 0;
  height: 100%; width: 0;
}
		
.from-middle:hover:before {
  width: 100%;
}

View live demo

Dont' forget to like or share this post if you found it useful. Thank you!