Overlaying.

Posted 14 September 2012 - 11:39 AM

My plan is to have a blue box with "FOLLOW US" in white font.
Once you hoover over it, it will dissapear and it will show the links to our facebook/twitter/ect.

I tried to do this by creating 3 dives.. (one inside the other)
First div is the holder
Second div is the image links to our social things
third div is the blue box with follow us on it..

I cant get the second div directly behind the first div. I tired z index and everything.. Here is the code

#social{
margin-top:10px;
width:460px;
height:50px;
border-color:#D4E2F0;
}

.soc{
margin-top:10px;
width:460px;
height:50px;
background-color:blue;
border-radius: 15px;
box-shadow: 0px 0px 10px 5px #D4E2F0;
}
.soctit{
maring-top:10px;
width:460px;
height:60px;
}
 
.socialimage:hover
{
  opacity:0.0;
}

.socialimage
{
 z-index:-1;
  width:50px;
  height:50px;
  border-radius: 10px;
  margin-right:15px;
  foat:center;
  margin-top:-70px;
  opacity:1.0;
  filter:alpha(opacity=10); /* For IE8 and earlier */
}

.socialimage:hover
{
  opacity:1.0;
}

html

<div id="social">
			   <div id="soc">
				<img src="http://fontmeme.com/create.php?text=FOLLOW%20US&name=BigMummy.ttf&size=40&style_color=FFFFFF"
				class="soctit" alt="Follow Us"/></a>
				</div>
				<div id="socialimage">
			 	  <a href="">
			 	  	 <img src="http://i574.photobucket.com/albums/ss181/chiroty/facebook-icon.png" class="socialimage" 
				 	 	  alt="Visit Us on Facebook"></a>
				  <a href=""> 
  				  	 <img src="../../../../Desktop/aivpics/twitter.png" class="socialimage" 
						  alt="Visit Us on Twitter"></a>
				  <a href="http://pinterest.com/aioutlet/">
					<img src="../../../../Desktop/aivpics/pinterest-logo.png" class="socialimage" 
						  alt="Visit Us on Pintrest"/>
				  <a href="https://plus.google.com/u/0/110257839780166133848/posts">
					 <img src="../../../../Desktop/aivpics/googlepluslogo.png"class="socialimage" 
						  alt="Visit us on Google+" /></a>
				 </div>
			 </div>

any help would be great..

Thanks guys