Hi... I have a problem with a hover, when I hover over the image every other images and fixed div desappear and reappear.

this the code I'm using: I know the code is not clean... but hey I'm new in web programing... please any help

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color:#000;
background-image:url(Style/gentics-content.jpg);
margin:80px 0px 0px 64px;
background-repeat:no-repeat;
}
div#opacity1{float:right; width:22px; height:150px; color: #FFF; font-size:25px;
position: fixed; left:0px; top:350px;
z-index: 1;
background: #000;
border: none;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
/* */


/* */
div#topdiv {
position:fixed;
top:0px;
left:0px;
width:100%;
height:80px;
color:#CCC;
background: #000;
border-bottom: solid;
border-bottom-width: thin;
background-image: url(Style/Only-crystal-logo.png), url(Style/myprofile.png), url(Style/shoping-cart.png);
background-position:200px center, 1230px center, 1280px center;
background-repeat:no-repeat;
}
div#bottomdiv {
position:fixed;
bottom:0px;
left:0px;
width:100%;
height:30px;
color:#CCC;
background:#000;
border-top:solid;
border-top-width: thin;
padding:0px;
background-image: url(Style/facebook.png), url(Style/twister.png), url(Style/you-tube.png), url(Style/google-plus.png), url(Style/Pinterest-logo.png);
background-position:1200px center, 1230px center, 1260px center, 1305px center, 1335px center;
background-repeat:no-repeat;
}
/* Seccion pa las imagenes-boton del lado derecho*/
.main1 {
position: fixed; left:1142px;
border: 2px solid white;
width:295px;
height:185px;
box-shadow: 0px 0px 26px black;
overflow: hidden;
}
.main1:hover img {
-webkit-transform: translateX(100px);
}
.main1:hover .content1 {
-webkit-transform: translateY(-311px);

}
img {
-webkit-transition: -webkit-transform 300ms;
}


.main2 {
position: fixed; left:1142px; top: 272px;
border: 2px solid white;
width:295px;
height:185px;
box-shadow: 0px 0px 26px black;
overflow: hidden;
}
.main2:hover img {
-webkit-transform: translateX(100px);
}
.main3 {
position: fixed; left:1142px; top: 463px;
border: 2px solid white;
width:295px;
height:185px;
box-shadow: 0px 0px 26px black;
overflow: hidden;
}
.main3:hover img {
-webkit-transform: translateX(100px);
}
.main4 {
position: fixed; left:1142px; top: 655px;
border: 2px solid white;
width:143px;
height:85px;
box-shadow: 0px 0px 26px black;
overflow: hidden;
}
.main5 {
position: fixed; left:1293px; top: 655px;
border: 2px solid white;
width:143px;
height:85px;
box-shadow: 0px 0px 26px black;
overflow: hidden;
}
/* */

</style>
</head>
<body>
<div class="main1">
<img src="Style/img_model_01.png" width="306" height="206" >
<div class="content1">
<button>Nokia 7210 Classic</button>
</div>
<div class="main2">
<img src="Style/img_model_02.png" width="306" height="206" >
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
<div class="main3">
<img src="Style/img_model_02.png" width="306" height="206" >
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
<div class="main4">
<img src="Style/img_model_02.png" width="306" height="206" >
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
<div class="main5">
<img src="Style/img_model_02.png" width="306" height="206" >
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
<div id="topdiv">Home</div>

<div id="opacity1"> > </div>
<div id="bottomdiv"></div>
</body>
</html>