How To Create Pure CSS Rollover To Display Single Or Multiple Elements At Remote Area

There are many CSS tutorials on the web and each tutorial are created to make web enthusiast life easier. It's great that people are willingly to share their skills and technique openly. But how many of those tutorials are being fully absorbed? I think a good tutorial should be easy to understand just by going it once and not many questions asked. There's no point in simplify a complex tutorial but make it hard for others to absorb.

So here is a simple tutorial that I’m presenting on how to display single or multiple elements at remote area using pure CSS rollover technique.

How To Create Pure CSS Rollover To Display Single Or Multiple Elements At Remote Area

Using Pure CSS Rollover Technique

At time, in order to increase better user experience or keeping the site simple and clean, you might want to hide the description or image and only appear when you rollover the button or link.

If you just want to have something appear within the button or link when rollover, then using CSS Sprite is a good idea, you can read more about How To Create CSS Sprite Rollover Button if you are not sure about it.

What if you want to display remote description or remote image somewhere outside of the button? Then, CSS Sprite might not be a good idea. So what we can do is, we can apply absolute positioning to place the remote element anywhere on the web page we want.

There will be no JavaScript involve, we'll just apply pure CSS to accomplish the task. You can check out the demo to see how remote element are being placed when you rollover the links.

CSS Rollover Display Remote Elements

Before we start, let's create CSS Sprite half rounded button for the demos.

CSS Half Rounded Button

Here are the CSS for the half rounded buttons

/************************************************
 CREATING CSS HALF ROUNDED BUTTON FOR BOTH EXAMPLE
************************************************/
#menu1 li a, #menu2 li a  {
    background:transparent url(images/button.jpg) no-repeat top left;
    display:block;
    float:left;
    height:31px;
    margin-right:15px;
}

#menu1 li a .button, #menu2 li a .button {
    background:transparent url(images/button.jpg) no-repeat top right;
    display:inline;
    float:left;
    height:21px;
    padding:10px 10px 0 0;
    margin-left:12px;
    cursor:pointer;
}

#menu1 li a:hover, #menu2 li a:hover {
    background-position:0px bottom;
    color:#fff;
}

#menu1 li a:hover .button, #menu2 li a:hover .button {
    background-position:right bottom;
}

Pure CSS Rollover With Single Remote Area

For this CSS Rollover with Single Remote Area tutorial, we will display the respective link description above the navigation bar when you rollover the link.

First, create the normal HTML menu unordered list, then have a span tag with a button class for the half rounded button. Follow by having another span tag with a text class to hold the description for each of the respective link.

Here are the HTML Markup

<ul id="menu1">
<li><a href="#">
		<span class="button">Home</span>
		<span class="text">Back to homepage</span>
	</a>
</li>
<li><a href="#">
		<span class="button">About Us</span>
		<span class="text">More about our team</span>
	</a>
</li>
<li><a href="#">
		<span class="button">Services</span>
		<span class="text">See what are we good at</span>
	</a>
</li>
<li><a href="#">
		<span class="button">Portfolio</span>
		<span class="text">Find out what have we done</span></a>
</li>
<li><a href="#">
		<span class="button">Contact Us</span>
		<span class="text">Let us hear from you</span>
	</a>
</li>
</ul>				

Here are the CSS

Now we need to hide the text class so that it will not display when the page load. By using CSS display: none; we can hide the text class .

In order to control the description on where we want it to show up within the web page, we can apply CSS position: absolute; for the hover over.

/************************************************
         EXAMPLE 1 - SINGLE REMOTE AREA
************************************************/
#menu1 a .text {
	display:none;
} 

#menu1 a:hover .text {
	display:block;
	position:absolute;
	height:20px;
	top:30px;
	left:0px;
	color:#000;
	font-size:11px;
}

Pure CSS Rollover With Multiple Remote Areas

In the tutorial above, you learn how to display a single element which is the description, when you rollover the links. Now what happened if you wish to display multiple elements at different locations when you rollover the links?

Now in this 2nd tutorial, we'll add in an icon for each link besides the description. When you rollover the links, it will show two remote elements at different areas within the web page.

Here are the HTML Markup

You can do a comparison, most of the HTML Markup are the same as the tutorial above. Now since there is another element which is the icon image, we will need to add another span tag to hold the icon for each link.

<ul id="menu2">
<li><a href="#">
		<span class="button">Home</span>
		<span class="text">Back to homepage</span>
		<span class="icon"><img src="images/home.jpg" alt="Home" /></span>
	</a>
</li>
<li><a href="#">
		<span class="button">About Us</span>
		<span class="text">More about our team</span>
		<span class="icon"><img src="images/aboutus.jpg" alt="About Us" /></span>
	</a>
</li>
<li><a href="#">
		<span class="button">Services</span>
		<span class="text">See what are we good at</span>
		<span class="icon"><img src="images/service.jpg" alt="Services" /></span>
	</a>
</li>
<li><a href="#">
		<span class="button">Portfolio</span>
		<span class="text">What have we done</span>
		<span class="icon"><img src="images/portfolio.jpg" alt="Portfolio" /></span>
	</a>
</li>
<li><a href="#">
		<span class="button">Contact Us</span>
		<span class="text">Let us hear from you</span>
		<span class="icon"><img src="images/contactus.jpg" alt="Contact Us" /></span>
	</a>
</li>
</ul>	

Here are the CSS

/************************************************
         EXAMPLE 2 - MULTIPLE REMOTE AREAS
************************************************/
#menu2 a .text, #menu2 a .icon {
	display:none;
}

#menu2 a:hover .text {
	display:block;
	position:absolute;
	height:20px;
	top:30px;
	left:0px;
	color:#000;
	font-size:11px;
}

#menu2 a:hover .icon {
	display:block;
	position:absolute;
	height:20px;
	top:180px;
	left:350px;
}

Conclusion

If you want to display more remote elements when you rollover the link, you can just add in more span tags. A last quick reminder, remember to add display: block; when you are applying absolute positioning to the remote span class, or else it will not work in Internet Explorer (IE). I hope I've made this CSS tutorial as easy to absorb as possible.

Do you find this CSS tutorial simple to understand? What is the easiest CSS tutorial that you have ever learn?