Efecto hover en div

Hola a todos,

Tengo el siguiemte codigo de 3 div alineados, lo que quiero es que al pasar el mouse sobre cualquier div este se mueva hacia arriba sin afectar a los demas. Lo unico que he logrado es mover todos al mismo tiempo, alguien podria oriantarme o ayudarme con este problemilla? por favor, aqui les dejo lo que tengon de antemano les doy las Gracias por su ayuda..

html

<section id="contenedor-intros">
<div id="intro1">Destinos Nacionales</div>
<div id="intro2">Destinos Internacionales</div>
<div id="intro3">Antes de Viajar</div>
</section>



css

#intro1 {
background: siler;
height: 450px;
text-align: center;
width: 300px;
}

#intro2 {
background: gray;
height: 450px;
text-align: center;
width: 300px;
}

#intro3 {
background: blue;
height: 450px;
text-align: center;
width: 300px;
}

#intro1, #intro2, #intro3 {
display: inline-block;
}

Hola, para que te funcione correctamente te hace falta posicionar los elementos, con los siguientes cambios ya funciona:

Código CSS :

#contenedor-intros{
   margin-top:100px;
   position:relative;
   }
#intro1 {
background:green;
height: 450px;
left:0;
position:absolute;
text-align: center;
width: 300px;
}

#intro1:hover {
background:green;
height: 450px;
left:0;
margin-top:-30px;
position:absolute;
text-align: center;
width: 300px;
}

#intro2 {
background: gray;
height: 450px;
left:300px;
position:absolute;
text-align: center;
width: 300px;
}

#intro2:hover {
background: gray;
height: 450px;
margin-top:-30px;
left:300px;
position:absolute;
text-align: center;
width: 300px;
z-index:3;
}

#intro3 {
background: blue;
height: 450px;
left:600px;
position:absolute;
text-align: center;
width: 300px;
}

#intro3:hover {
background: blue;
height: 450px;
left:600px;
margin-top:-30px;
position:absolute;
text-align: center;
width: 300px;
}

Muchas Gracias alejilla!!! funciona muy bien,,,, muy agradecido.