How to hide the x and y scrollbars in my folding out pictures?

How to hide the x and y scrollbars in my folding out pictures?

On this homepage website, I have three big pictures, which fold out on a hover... so basically a big part of the image is hidden and at a mouse hover it get's visible.... 

Thing is... I get these ugly scrollbars in my images when they fold out... I tried to get rid of them, but so far without any succes... 

I'm a bit of a rooky on the field of building websites...so maybe this solution is very easy to solve... I hope... 

This is the html and css...

<!DOCTYPE html>

<html>
<head>
    <title>Homepage</title>
    <link rel= "stylesheet" href= "stylesheet.css" type= "text/css" media= "screen"
    title= "no title" charset= "utf-8">
<style type="text/css">
</style>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">

//$(document).ready(function() {
// $('#menu ul li ul').hide(); 
// $("#menu li").click(
// function(){
// $('#menu ul li ul').hide();
// $(this).find('ul').show();
// }
// );
//   
//});
</script>

</head>

<body>
<div id="overflow">
    
    <div id="div-logo">
         <img src="img/logo.png" alt="LCB" width="143" height="110">
            
    </div>

<div id="menu" class="menu">
        <ul><li><a href="#menu">Architecture</a>
                <ul id="menu1"><li><a href="obese clinic.html">Obese clinic</a></li>
                    <li><a href="projectHouseB.html">House B</a></li>
                    <li><a href="schoolinRotterdam.html">School</a></li>
                    <li><a href="pavillion on the siltdepot.html">pavillion on the siltdepot</a></li>
                </ul>
            </li>
            <li><a href="designpage.html#menu">Design</a>
                <!--<ul><li><a href="caribbeanbusstop.html">Caribbean busstop</a></li>
                    <li><a href="closet.html">Closet</a></li>
                </ul>-->
            </li>
            <li><a href="aboutme.html"> About me</a></li>
            <li><a href="contact.html"> Contact</a></li>
        </ul>
    </div>
    
    
    
    <div id="main">
        
    
        <div id="fixedlines" class="line">
        <div id="line1" class="line">
            
        </div>
        
        <div id="line2" class="line">
            
        </div>
        
        <div id="line3" class="line">
            
        </div>
        
        <div id="line4" class="line">
            
        </div>
        
        <div id="line5" class="line">
            
        </div>
        
        <div id="line6" class="line">
            
        </div>
        
   

        <div id="line7" class="line" >
        
        </div>
    
        <div id="line8" class="line">
       
        </div>
    
        <div id="line9" class="line" >
            
        </div>
    
        <div id="line10" class="line">
            
        </div>
    
        <div id="line11" class="line" >
        
        </div>
    
        <div id="line12" class="line">
        
        </div>
            
        <div id="line13"  class="line">
        
        </div>               
            
        <div id="line14" class="line">
        
        </div>        
            
        <div id="line15" class="line">
        
        </div>
    
        <div id="line16" class="line">
        
        </div>
    </div>
    
     <div id="floatlines" class="line">
        <div id="line17" class="line slideout">
            <div class="image pavillion"><a href="pavillion on the siltdepot.html"><img src="img/Bsc2.jpg" alt="pavillion" width="1232" height="950"</a>
            </div>
            
        </div>
    
        <div id="line18" class="line slideout">
            <div class="image houseB"><a href="project House B.html"><img src="img/huisBhal.jpg" alt="huisB" width="1089" height="950"</a>
            </div>
        </div>
    
        <div id="line19" class="line compleet">
            <div class="image obese"><a href="obese clinic.html"><img src="img/Obeseclinic.jpg" alt="ObeseC" width="1712" height="950"</a>
            </div>
        </div>
        
        <div id="line20" class="line">
            
        </div>
        
        
    

    </div>
</div>

</body>
</html>

And the CSS below: 

body {
      margin: 0;
      padding: 0;
}
                        
    div#fixedlines {
position:fixed;
    }
    div#floatlines {
margin-left:119px;
    }
          
/* Deze div verstopt alles wat niet erin past */
div#overflow {
                                position: absolute;
width:100%;
min-width:960px; /* Zorgt ervoor dat je bij een scherm minder dan 960 pixels breed wel kan scrollen */
height: 100%;
overflow: hidden;
                                background-color: #000000;
}
/* Deze div is 10x groter dan het scherm, zodat alles sowieso achter elkaar gaat staan */
div#main {
width: 1000%;
height: 100%;
}
div.line {
margin:0;
display: block; /* display:inline-block geeft ruimte tussen de divs (wegens de enters in de html) */
float: left;
height: 100%;
background-color: #000000;
/*outline: 1px solid red;*/
overflow: hidden;
}
                        div.compleet {
                                margin:0;
display: block; /* display:inline-block geeft ruimte tussen de divs (wegens de enters in de html) */
float: left;
height: 100%;
background-color: #000000;
/*outline: 1px solid red;*/
overflow: visible;
                        }
                        
div.line.slideout {
/*background-color: white;*/
}
div.line.slideout:hover,
                        div.line.slideout.out {
width:auto !important;
overflow: auto;
/*background-color: red;*/
}
div.line div.image pavillion {
width:1089px;
height: 100%;
/*background-color: blue;*/
}
                        
                        div.line div.image houseB div.geheel{
width:966px;
height: 100%;
/*background-color: blue;*/
}
                        
                        div.line div.compleet div.image obese {
width:1514px;
height: 100%;
/*background-color: blue;*/
}
                        
                        div.line div.tekstuitschuif {
width:144px;
height: 100%;
}
                        
                        div#lijnenspel {
position: fixed;
left: 240px;
width: 1000%;
height: 950px;
z-index: 10000;
}
div#uitklaplijnen {
position: relative;
float: left;
left: 0px;
width: 1000%;
height: 100%;
}
                        
div.lines {
margin:0;
display: block; 
float: left;
height: 100%;
}
                        
div.lines.sliderout {
overflow: hidden;
}
div.lines div.imageT{
width:173px;
height: 100%;
z-index: -100;
}
div.lines div.uitleg {
position: relative;
width: 300px;
height: 100%;
z-index: 100;
top: -930px;
left: 27px;
font-size: 14px;
font-family: century gothic;
}
div.lines div.imageplan {
width:1275px;
height: 100%;
background-color: black;
}
div.lines div.imageconcept {
width:334px;
height: 100%;
background-color: black;
}
div#lineA {width:21px;}
div#lineAa {width:4px;}
div#lineB {width:34px;}
div#lineBa {width:4px;}
div#lineC {width:54px;}
div#line1 {width:1px;
           background-color: #0d7062;
}

div#line2 {width:1px;}

div#line3 {width:2px;
           background-color: #151515;
}

div#line4 {width:2px;}

div#line5 {width:3px;
           background-color: #151515;
}

div#line6 {width:3px;}

div#line7 {width:5px;
           background-color: #151515;
}

div#line8 {width:5px;}
  
div#line9 {width:8px;
           background-color: #151515;
}

div#line10 {width:8px;}

div#line11 {width:13px;
            background-color: #151515;
}

div#line12 {width:13px;}

div#line13 {width:21px;
            background-color: #151515;                                                    
}

div#line14 {width:34px;}

div#line15 {width:55px;}

div#line16 {width:89px;}

div#line17 {width:144px;}

div#line18 {width:233px;}

div#line19 {width:/*377*/1597px;}

div#line20 {width:610px;}



#div-logo {
  float: left;
  position: relative;
  z-index: 100;
  left: 45px;
  height:110px;
  width: 143px;
  /*background-color: black;*/ 
}


div#menu {
    float: left;    
    position:absolute;
    z-index: 100;
    margin-top: 142px;
    width: 300px;
    height: 89px;
    /*background-color: white;*/
    
    font-family: century gothic;
    font-size: 10px;
    
    
}

a:link {text-decoration:none;
color: white;}
a:visited {text-decoration: none;
color: white;}
a:hover {text-decoration: none;}

.menu ul {
  padding: 2px;
  text-decoration: none;
  list-style: none;
  display: inline-table;
}

.menu ul ul {
display: block;
        position: absolute;
        left: 85px; 

}