Display Text on Icon Hover Using HTML/CSS

Do you want to display text when hover an icon or button? In this quick tutorial, I will you how you can easily do this by just using HTML and CSS.

I will create a set of icons list and when user mouse over an icon the text will be shown on the right side of the icon with CSS3 animation slideout effect.

The animations are a very powerful tool. It allows you to create animated menus, slider, tabs and much more without using any javascript.

Now all the latest version of browsers do support all the advanced CSS3 properties. The next better thing in the next generation of browsers will have more powerful tools like 3D transformation.

At this moment, Only three browsers fully support the CSS3 animations and they have the ability to animate CSS3 properties. These browsers are Safari, Opera, and Chrome which together take only a small part of the browser market.

How to Display Text on Icon Hover

I will create a list of menus so you can use a mini menu on your site if you want. The menu organized as an unordered list ul, li which is most used and best practice for navigation.

It provides you an easy way to style the icons and semantically correct.

Remember that we make three different variations for these lists which called Left, Right, and horizontal icons list.

<ul id="MiniLeftNav">
    <li>
        <a class="navtext" href="#"><i class="fa fa-home fa-2x"></i> <span>Home</span></a>
    </li>
    <li>
        <a class="navtext" href="#"><i class="fa fa-cab fa-2x"></i> 
            <span>Services</span>
        </a>
    </li>
    <li>
         <a class="navtext" href="#"><i class="fa fa-briefcase fa-2x"></i> 
            <span>Products</span>
         </a>
    </li>
    <li>
        <a class="navtext" href="#"><i class="fa fa-photo fa-2x"></i> 
            <span>Gallery</span>
        </a>
    </li>
    <li>
        <a class="navtext" href="#"><i class="fa fa-envelope fa-2x"></i> 
            <span>Contact us</span>
        </a>
    </li>
</ul>

Inside each li we have a hyperlink with a span and i inside it. By default, these spans are hidden and are only shown when you hover the icon.

As for as i it used for the different icon for each link. The icons are used from Font Awesome

The Styling

Our basic HTML structure is ready and now we move to create an awesome CSS3 effect and styling the list of icons. This will work on browsers which support CSS3 transition animations effects. Also menu even perfectly usable in browsers as old as IE6 or IE7.

For the styling of the body background. First I will supply a background color, which acts as a fallback, and then added two CSS3 radial gradients (for Firefox and Chrome/Safari respectfully) as background images.

If the visitor’s browser does not support gradients, it will just ignore the rules and go with the background color.

I will also apply some basic styling for li and hyperlink. I set some width for the icon menu and add border style to make them look good.

#MiniLeftNav li{
	list-style: outside none none;
    margin: 20px 0;
    padding: 0;
    width: 48px;
}
#MiniLeftNav li a{
    border:solid 1px #fff;
	display: block;
    padding: 7px;
    position: relative;
}

Next, I will go and play with span property which needs to make hidden by using overflow: hidden; and position: absolute;.

I also added some style like font-size etc. Another most important thing that we need to add Transition so it should open with a nice effect when hovering.

#MiniLeftNav span {
    font-family: 'Raleway', sans-serif;
    font-size:14px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    bottom: 0;
    left: 47px;
    line-height: 38px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 0;
    
    /* CSS3 Transition: */
	-webkit-transition: 0.50s;
	/* Future proofing (these do not work yet): */
	-moz-transition: 0.50s;
	transition: 0.50s;  
}
#MiniLeftNav a:hover span{ width:auto; padding:0 30px;overflow:visible; }
#MiniLeftNav a:hover{text-decoration:none;}
#MiniLeftNav a span{
	background-color:#fff;
	color:#3d4f0c;
}

The transition is a very powerful property. It allows you to animate the changes that occur on an element when a pseudo properties take effect.

Like when the user hovers the mouse on the menu link the :hover pseudo-property takes effect and shows the Slide Hover Effect which is otherwise hidden.

If we don’t define transition property then the menu still shows but it doesn’t have any effect which didn’t look impressive.

Here we are telling the browser which the duration of the animation is 500 milliseconds. You can optionally specify a list of specific properties to be animated instead of all of them.

Make sure that the width should be auto on standard or hovering states. On hover, we just need to make overflow:visible

In the last part of the styling, We specify three different types of icons list type which included in the demo and download a zip file.

Hope you like this creation and lets us know What do you think about it? How would you improve this navigation menu?

You May Also Like

Leave a Comment