Problema con efecto hover

[Siroguh]

Hola. Tengo un problema. Tengo dos divs metidos en otro div, el de la izquierda esta semioculto a la izquierda con overflow:hidden en la caja contenedora. Quiero que al hacer "hover" en el div de la izquierda, este se des-oculte hacia la derecha y desplaze al div de la derecha hacia la derecha, quedando el div de la derecha semioculto.



este es mi html:

Código HTML:

<div id="izqder">



		<div id="izq">
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
	  </div>


	  <div id="der">
		<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
		</div>




	</div>	
  
	

y este mi css:

Código HTML:

#izqder{
	width:98%;
	height:300px;
	border:10px solid #333;
	border-radius:20px;
	margin-bottom:40px;
	padding:10px;
	overflow:hidden;
}


#izq{
	width:33%;
	height:99%;
	border:1px solid #333;
	display:inline-block;
	left:-20%;
	position:relative;
	z-index:5;
	-moz-transition:all 1s ease-in-out;
	    clear:both;
}


#izq:hover{
	left:0%;
}

#der{
	width:65%;
	height:99%;
	border:1px solid #333;
	display:inline-block;
    position:relative;
    float:right;
    clear:both;
    
}

Diganme como hacerlo