html - Navigation bar made of images -

i have 5 different images being used buttons website's navigation. want them inline horizontally , centred in browser window. looked fine until added code have text appear under each button when hovering on each image. buttons aligned vertically in middle of window.

in html file:

   <div class="nav">         <div class="container">             <ul>             <div class="about">             <li><input type="image" src="image.png" id="aboutpage" onclick = 'aboutpage()'/></li>             <p class = "text1"> </p>             </div>              <div class="resume">             <li><input type="image" src="image.png" id="resumepage" onclick = 'resumepage()'/></li>             <p class = "text2"> resume </p>             </div>              <div class="home">             <li><input type="image" src="image.png" id="homepage" onclick = 'homepage()'/></li>             <p class = "text3"> home </p>             </div>              <div class="portfolio">             <li><input type="image" src="image.png" id="portfoliopage" onclick = 'portfoliopage()'/></li>             <p class = "text4"> portfolio </p>             </div>              <div class="contact">             <li><input type="image" src="image.png" id="contactpage" onclick = 'contactpage()'/></li>             <p class = "text5"> contact </p>             </div>         </ul>         </div> 

in css file:

.nav {   position: absolute;   bottom: 0%;   left: 50%;   transform: translate(-50%, -50%); }  .nav .container {    font-size: 12px;   font-family: 'shift', sans-serif;   color: #5a5a5a;   font-weight: lighter; }  .nav .container ul {   list-style-type: none;   margin: 0;   padding: 0; }  .nav .container li {   display: inline; } 

the following sample of hover code each image:

.nav .container .about .text1 {    position:relative;    bottom:0px;    text-align: center;    visibility: hidden; }  .nav .container .about:hover .text1{    visibility: visible; } 

any appreciated! thank you.

first of all, have few remarks when comes markup. know not code review, , not entirely relevant question, can't myself when @ html:

• a div.nav screams me in fact want use nav
• that div.container seems obsolote me, , adds markup. if realy need container class (for css or js reasons), why not add ul in stead.
• an ul can have li elements direct child, div elements should become child of li in stead of parent.
• why using (the rare) input[type=image] elements, in stead of usual <a><img></a>? seems strange.
• using different class each text seems serve no purpose. makes code harder maintain , css lot more verbose. wonder if need class @ all, if have reason, @ least use same class text blocks.

taking remarks account, markup this:

<nav>     <ul class='container'>         <li>             <a href='#'>                 <img src='' alt='do not forget alt, nav!' />                 <p>text</p>             </a>         </li>         ...     </ul> </nav> 

then actual question, not entirely sure understand trying achieve, this came with. css looks this.

nav {     position: absolute;     top: 50%;     left: 0;     transform: translate(0, -50%);     text-align: center; } nav ul {     font-size: 12px;     font-family:'shift', sans-serif;     color: #5a5a5a;     font-weight: lighter;     list-style-type: none;     margin: 0;     padding: 0; } nav li {     margin: 12px;     display: inline-block; }  nav p {     opacity: 0;     transition: opacity .5s; } nav a:hover p {     opacity: 1; } 

note went opacity in stead of visibility because allows add transition, find give nicer experience. should able use visibility though (or remove transition) instant state switch.

i hope puts on right track. let me know if misunderstood anything, or if want me explain further.