Navigation bar made of images - html

Question

I have five different images being used as buttons for my website's navigation. I want them to be inline horizontally and centred in the browser window. They looked fine until I added code to have text appear under each button when hovering over each image. The buttons are now all aligned vertically in the middle of the 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"> About </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 is a sample of the hover code for each image:
.nav .container .about .text1 {
position:relative;
bottom:0px;
text-align: center;
visibility: hidden;
}
.nav .container .about:hover .text1{
visibility: visible;
}
Any help would be much appreciated! Thank you.

Answer 1

First of all, I have a few remarks when it comes to your markup. I know this is not code review, and not entirely relevant to the question, but I just can't help myself when I look at the HTML:
a div.nav just screams to me that you in fact want to use a nav
that div.container seems obsolote to me, and just adds markup. If you realy need the container class (for css or js reasons), why not add it to the ul in stead.
an ul can only have li elements as direct child, so those div elements should become a child of the li in stead of a parent.
why are you using (the very rare) input[type=image] elements, in stead of the usual <a><img></a>? It just seems strange.
using a different class for each text seems to serve no purpose. It just makes your code harder to maintain and your css a lot more verbose. I wonder if you need a class at all, but If you have a good reason, at least use the same class for all the text blocks.
Taking those remarks into account, my markup would look something like this:
<nav>
<ul class='container'>
<li>
<a href='#'>
<img src='' alt='do not forget your alt, especially for nav!' />
<p>text</p>
</a>
</li>
...
</ul>
</nav>
Then for your actual question, I am not entirely sure I understand what you are trying to achieve, but this is what I came up with. The css looks something like 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 that I went for opacity in stead of visibility because that allows you to add a transition, which I find to give a much nicer experience. You should be able to use visibility as well though (or just remove the transition) for an instant state switch.
I hope this puts you on the right track. Let me know if I misunderstood anything, or if you want me to explain further.