Images appearing above navigation menu, when opacity lowered - css

Question

I have a problem where images are appearing over my navigation menu. I have a fixed nav menu that stays at the top of the window, and 8 images that are set to 0.7 opacity lower on the page. The image change to 1.0 opacity when you hover, If you scroll down the images above the nav menu, unless i hover over them, then they appear under the nav like they should.
I will show you my code for the nav, and one of the 8 images, maybe someone can help. this is my first time posting, I hope everything is posted correctly.
Nav:
<div id="nav-container">
<div id="nav">
<ul>
<li>Home</li>
<li>Folio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
Images:
<div id="bg2">
<div class="content-title">
<h2>Folio</h2>
<p> This is what I do </p>
<div class="content-area">
<div class="folio-item">
<img src="images/folio/folio1.png" alt="some_text">
</div>
</div> <!-- content-area close-->
</div> <!-- content-title close-->
Relvent Style:
#nav-container {
width:100%;
height:50px;
box-shadow: 0px 1px 50px #464646;
position:fixed;
top:0px;
background-image: url(images/bggrey.png);
}
#nav {
font-size: 14px;
text-align: center;
line-height: 50px;
}
#nav li{
text-decoration: none;
text-align: center;
display: inline;
padding: 10px;
margin-left: 40px;
margin-right: 40px;
}
#nav a{
text-decoration: none;
color: rgb(250,250,250);
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#nav a:visited{
text-decoration: none;
color: rgb(250,250,250);
}
#nav a:hover{
text-decoration: none;
color: rgb(250,250,250);
opacity: 0.7;
}
#nav a:active{
text-decoration: none;
color: rgb(250,250,250);
}
#bg1 {
background-image: url(images/bubble.png);
background-repeat:no-repeat;
background-position: center;
height: 800px;
margin: -1;
}
.content-title {
width: 960px;
margin: auto;
font-size: 20px;
color: white;
text-align: center;
padding-top: 70px;
}
.content-title p{
font-size: 14px;
}
.content-area {
border: 1px dashed black;
height: 500px;
width: 960px;
margin: auto;
margin-top: 50px;
font-size: 0px;
}
.folio-item {
float: left;
opacity: 0.7;
}
.folio-item:hover {
opacity: 1.0;
transition: opacity .3s ease-out;
-moz-transition: opacity .3s ease-out;
-webkit-transition: opacity .3s ease-out;
-o-transition: opacity .3s ease-out;
}

Answer 1

If I understand in the right way you want your #nav-container always overlapping the images; then you need the property z-index to manage the level of the elements, try adding this on the CSS:
#nav-container {
z-index:1;
}