Que elementos se queden debajo de div al agrandar uno de estos

[davidd991]

Vereis amigos, tengo un pequeño problema el cual me ha llevado casi toda la tarde hoy, pero aun no he sacado, a ver si me podeis echar una mano.

Resulta que tengo un contenedor con cuatro elementos, a los cuales les crece la altura al hacer hover. El problema esta en que cuando hago hover en uno de ellos, los otros no se quedan en la misma posicion, sino que suben hasta la parte de arriba del contenedor padre, y lo que busco es que los elementos que no crecen, se queden en su posicion. No se si me explico...

Pongo el codigo y luego un ejemplo para que lo veais claro

HTML

Código:

<div class="pack-hover-video">
	<a href="" class="fleet-hover-video" id="fleet-hover-video-1">	
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod lorem. Lorem ipsum dolor sit amet, consetetur sadipscing
										
	</a>

	<a href="" class="fleet-hover-video" id="fleet-hover-video-2">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod lorem. Lorem ipsum dolor sit amet, consetetur adipscing
	</a>

	<a href="" class="fleet-hover-video" id="fleet-hover-video-3">	
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod lorem. Lorem ipsum dolor sit amet, consetetur sadipscing
	</a>
	<a href="" class="fleet-hover-video" id="fleet-hover-video-4">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod lorem. Lorem ipsum dolor sit amet, consetetur sadipscing
	</a>
</div>

CSS

Código:

.pack-hover-video {
	position: absolute;
 	bottom: 40px;
	left: 40px;
}
	

      .fleet-hover-video {
        float: left;
        display: block;
        width: 100px;
        height: 50px;
        margin-right: 45px;
        background-color: black;
        border-radius: 10px;
        opacity: 0.7;
        text-align: center;
        padding: 30px 20px 0 20px;
        overflow: hidden;
        text-decoration: none;
        color: #fff;
}

        .fleet-hover-video:hover {
            background-color: red;
            height: 100px;
            -moz-transition: 1s ease;

            
        }

He probado con vertical-align pero nada. Los tres elementos restantes suben con el elemento que crece hasta arriba del elemento padre.

Eliminar el elemento padre no se si sería buena opción, porque tendría que usar posiciones absolutas para colocar los cuatro elementos y sería una putada ya que el sitio tiene que ser responsive.

Aquí un ejemplo: http://cssdeck.com/labs/2qcqowk7

(el contenedor esta posicionado a otro contenedor de la pagina, no tiene nada que ver pero con el tema)

Muchísimas gracias a todos y a ver si me lo sacais que he estado a punto de desesperar esta tarde por esto.
Un saludo

[davidd991]

Nadie?

[mbm150]

Hola

no entiendo del todo como quieres que quede, pero vertical align funciona con display: inline-block;, algo asi:

Código CSS:

.pack-hover-video {
    position: absolute;
    bottom: 40px;
    left: 40px;
}
.fleet-hover-video {
        display: inline-block;
        vertical-align: bottom;
        width: 100px;
        height: 50px;
        margin-right: 45px;
        background-color: black;
        border-radius: 10px;
        opacity: 0.7;
        text-align: center;
        padding: 30px 20px 0 20px;
        overflow: hidden;
        text-decoration: none;
        color: #fff;
        transition: 1s ease;
}
 
        .fleet-hover-video:hover {
            background-color: red;
            height: 100px;
        }
 

https://jsfiddle.net/mbm150/hfy62vpv/

Espero que te sirva.

Saludos.