20 Cool Hover effects Using CSS3 Transition

CSS3 has provided the designers a magic wand for which designers have always craved for. Now using CSS3 they can create such effects which were not possible without Flash few years back. In this tutorial I have created some link hover effects using CSS3 tansitions and CSS pseudu elements. The effects have been achieved using simple tricks combining the transitions and pseudo elements.

CSS3 Transition Effects

Live Demo Download Script

Sample Usage

<style>
.nav-1 a::after {
    display: block;
}

.nav-1 a::after {
    margin-top: 5px;
    width: 0;
    height: 4px;
    background-color: #fff;
    content: '';
    opacity: 0;
    -webkit-transition: width 0.3s, opacity 0.6s;
    -moz-transition: width 0.3s, opacity 0.6s;
    transition: width 0.3s, opacity 0.6s;
}

.nav-1 a:hover::after,
.nav-1 a:focus::after {
    opacity: 1;
    width: 100%;
}
</style>

<section class="color-1">
    <nav class="nav-1">
        <a href="#">Lorem</a>
        <a href="#">Ipsum</a>
        <a href="#">Consectetur</a>
        <a href="#">Adipisicing</a>
        <a href="#">Eiusmod</a>
    </nav>
</section>