CSS Text and Image Menu Rollover

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

Demo

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;
}
Category: CSS Tags: , No Comments By:

Related Posts

Simple CSS Gallery: Image & Text Rollover

Create a simple CSS gallery with thumbnails, large images and text. Demo IMAGE ONE:Lorem ipsum dolor sit ame... Read More »

CSS Menu Current Page Highlighted

Create a CSS menu that indicates or highlights the current page: Demo Home About us Contact us HTML Code &... Read More »

CSS Horizontal Menu

Create a simple HTML bullet list menu and style it with CSS: Demo: menu item 1 menu item 2 menu item 3 men... Read More »

Leave a Comment

Your email address will not be published. Required fields are marked *


*