CSS Text and Image Menu Rollover

Create an HTML menu with images and text styled with CSS:

Demo

onetwothree

HTML Code

<div id="menu_container">

  <a href="#"><img src="images/one_s.jpg" height="86" width="108"/><span>one</span></a>

  <a href="#"><img src="images/two_s.jpg" height="86" width="108"  /><span>two</span></a>

  <a href="#"><img src="images/three_s.jpg" height="86" width="108"  /><span>three</span></a></div>

CSS Code

#menu_container{
	position:relative;
	width: 450px;
	margin:auto;
	background-color:#666666;
	height: 140px;
	padding: 10px;
}


/*  Styles for links in the #menu_container */
#menu_container a {
display: block;
color: #CCCCCC;
text-decoration:none;
float:left;
text-align:center;
margin:10px ;

}


/*  Styles for images within a link in the #container  */
#menu_container a img {
border:10px solid white; 

}

/* Styles for the span tag that holds the text */


#menu_container a  span {
display: none;
}

#menu_container a:link  span {
display: none;
}


#menu_container a:visited span {
display: none;
}


#menu_container a:hover span {
display: block;
width: 128px;
color:#000000;
background:#99CC99;  
  
}


#menu_container a:active span {
display: none;
}