This is a quick tutorial about creating simple hover effects that would be best suited for links within a navigation. The reason for this is that these might be too much when done inline within a paragraph but that is only a word of caution – if you want to apply these to your normal links, all the power to you.
Like the title of this tutorial, and like I’ve mentioned in this intro these hover effects are pretty simple. This, in turn, makes them good for a lot of designs so I do hope you find them useful. I am not going to go over the logic behind all five of the hover effects but I can talk about two of them in greater detail to give you a clear idea of what is going on in order to create these types of awesome hover animations.
The First Effect
The first effect is very basic; it makes the darker colour text fade into a lighter one. You can obviously change the colours out to suit your needs. The idea behind this effect is two overlapping texts of different colour, one of which fades out on hover. Let’s take a look at the code behind it.
The HTML
Each one of these five purple sections is actually a HTML5 section with a different coloured background. Within it you have another HTML5 tag, the nav tag. It also contains a class, which correlates to the effect being made.
<section class="shade1"><nav class="effect1"><a href="#" data-hover="Retro">Retro</a><a href="#" data-hover="Food truck">Food truck</a><a href="#" data-hover="Messenger bag">Messenger bag</a><a href="#" data-hover="Banjo">Banjo</a><a href="#" data-hover="Artisan">Artisan</a></nav></section>
As you’ll see that it differs from one effect to the other but this effect calls for a bunch of anchor links with an interesting attribute. In order for this effect to work, data-hover attribute needs to be set on the links and its value needs to be the same as the value of the link. Otherwise, this effect will not work.
The CSS
The CSS behind this effect is actually not that complex, Let’s go over it one rule at a time. First, we define the bare basics, which is the colour, weight and text of the link itself. That’s as straightforward as it get; the best part is that this totally customizable – this does not affect the functionality of the hover effect.
.effect1 a {
color:#a186be;
text-transform:uppercase;
font-weight: bold;
}
We then have to customize the lighter text that will appear on the effect. We are using the before pseudo class in addition to the data-hover attribute we set in the HTML mark up in order to get the lighter text to appear below the dark text.
.effect1 a::before {
content:attr(data-hover);
color:#662d91;
position:absolute;
transition:transform 0.3s,opacity 0.3s;
-moz-transition:-moz-transform 0.3s,opacity 0.3s;
-webkit-transition: -webkit-transform 0.3s,opacity 0.3s;
}
Above we are doing a bunch of important things so let’s go over it line by line. First we are defining that the literal content of this pseudo class be the value from the data-hover attribute. This is what makes the text appear without having complex duplicate HTML code. Next, we set the colour so that the text differs and the effect works. After that we, set the position of the before pseudo class to be absolute; what this does it make the text be placed directly underneath the link text.
Now the last three lines of CSS in that rule relate to the actual transition between the text on top and below. This literally sets a transition of 3 second onto the opacity of the top most text making it appear to fade out.
.effect1 a:hover::before,.effect1 a:focus::before {
opacity: 0;
}
Now, this transition wouldn’t work without the trigger. The above CSS makes it so that on hover – and focus – the link’s opacity is set to 0, meaning it will become invisible. The transition in the previous rule created the fade in and out effect. However, this is what makes the effect happen because if the opacity on hover were 100% – or 1 – then nothing would have changed and the text would have stayed the same.
The fourth effect
The fourth effect down the row is one where an underline fades in below the link once you hover it. It is actually simpler to create this then the first effect I’ve just talked about.
The HTML
This section was created thanks to the section, nav and anchor tags just like the rest. What makes this effect special is that it has plain anchor tags with no data-hover attribute like the first effect. It also doesn’t have a span within the anchor either like some others, which you can see if you download the source files.
<section class="shade4"><nav class="effect4"><a href="#">Typewriter</a><a href="#">Etsy</a><a href="#">YOLO</a><a href="#">Selfies</a><a href="#">Flannel</a></nav></section>
The CSS
First we style the default links by giving them a colour and some padding. The padding will determine the distance of the underline below the link.
.effect4 a {
color:#662d91;
padding: 10px 0;
}
If you take a look at the rule below you can see that we are using the after pseudo class to define what the underline will look like. The underline is actually a 1px high div not an actual text decoration underline or border bottom. We want to define its width to be 100% so that it is just as wide as the link itself.
.effect4 a::after {
background:#662d91;
position:absolute;
top:100%;
left:0;
content:'';
width:100%;
height:1px;
opacity:0;
transition:opacity 0.3s,transform 0.3s;
-moz-transition:opacity 0.3s,-moz-transform 0.3s;
-webkit-transition:opacity 0.3s,-webkit-transform 0.3s;
transform:translateY(-10px);
-moz-transform:translateY(-10px);
-webkit-transform: translateY(-10px);
}
We are also setting the opacity of the underline to be 0 so that it is not visible by default, as you can see above. Additionally, we need to set the position of this underline to be absolute and top and left 0 so that it is directly below the link’s set padding and so that it starts as far left as the link itself.
Now, you can also see above that we are setting a transition for opacity – so that on hover we can make the link appear – and a translation on the y axis. What this means it that at first, the underline is 10 pixels above where it should be so that when it is triggered to fade in in will flow downwards to its original position.
In the code below we are setting the trigger once again. We are defining the underline be 100% visible – with opacity being set to 1 – and moving the underline to its original Y position of 0. And this, right there, is what makes the underline appear and fade in below the navigation link.
.effect4 a:hover::after,.effect4 a:focus::after {
opacity:1;
transform:translateY(0px);
-moz-transform:translateY(0px);
-webkit-transform: translateY(0px);
}
The rest of the effects
The same idea goes for the remaining three hover effects that I did not explain; you have content overlapping content, changes being triggered on hover where the pseudo classes are used to set the changes. I do not think this is rocket science at all. I think this pattern is very straightforward to understand so that you can make other effect for yourself.