CSS Text and Image Menu Rollover

m5 design studio logo

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

Author

M5 Design Studio

We are a small, but creative and passionate team of designers and developers specializing in web design, graphic design, branding & digital marketing.


orlando web design company

How to add animation to a website

Orlando Web Design Company Small, simple animations are fun and interesting! They can keep your users engaged and spice
orlando web deisgn bootstrap

Customizing Bootstrap

Orlando Web Design & Development Twitter's Bootsrap is a powerful front-end framework for faster and easier web dev
web design orlando lesson 6

Orlando Web Design: CSS Page Layout – Understanding CSS Positioning

Orlando Web Design & Development CSS Page Layout: Understanding CSS Positioning There are 3 ways of creating CSS l

Comments are closed.