Como hacer que en una transicion un div quede fijo

[OsquiB]

Hola chicos tengo una pregunta, tengo un div al cual le hago una transicion para cambiar de bg, a la hora de cambiar el bg (que es mayor al anterior) el div que esta hacia abajo se desplaza, como puedo hacer para que quede fijo ?

Para que se entienda mejor aca dejo un ejemplo:


Como se ve en la imagen cuando paso el mouse por arriba del icono este aumenta su tamaño, el problema es que al aumentar su tamaño se desplaza el div que esta abajo. Como puedo hacer que ese div que esta abajo de la imagen se quede en su lugar ?

[pzin]

Especificándole al icono una posición relativa o absoluta, será más fácil la segunda opción —menos que calcular.

[OsquiB]

Gracias por contestar,
Si le pongo una posición absoluta desaparece el icono, y si le pongo una posición relativa no surge ningún cambio. Que puedo hacer ?
Trate de ponerle un margen pero aun asi el div se desplaza hacia abajo, aca dejo la estructura:

Código HTML:

<div id="mss" class="col">
    <div class="imagen"></div>
    <div class="col-cnt">
	 <h2>TITULO</h2>
	 <p>texto...</p>
	 <a href="#" class="more">ver mas</a>
    </div>
</div> 

y el css es este:

Código:

.main .cols { padding-left: 32px; padding-right: 32px;  }
.main .cols h2 { padding-bottom: 4px; text-align: center; }
.main .cols #mss { width: 238px; height: 250px; float: left; box-shadow: 0 0 15px rgba(0,0,0,.28); -webkit-box-shadow: 0 0 15px rgba(0,0,0,.28); -moz-box-shadow: 0 0 15px rgba(0,0,0,.28); margin-left: 20px; padding: 20px; }
.main .cols .col { display: block; margin: 0 auto; width: 73px; height: 74px; margin-top: 8px;  margin-bottom: 14px; }
.main .cols .col .imagen { margin-left: 60px; height: 112px; background: url(images/service-ico1.png) no-repeat; position: relative; }
.main .cols .col .imagen:hover { height: 121px; background: url(images/service-ico1h.png) no-repeat; transition: 1s; }

[pzin]

Desaparecer no creo que desaparezca.

Algo así te podría valer:

Código CSS:

div#mss {
  position: relative;
  padding-top: 200px; /* para crear un espacio para el icono */
}
 
div.imagen {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: (aquí un número negativo que sea igual a la mitad del ancho de la imagen);
}
 

[siddartha23]

Sería mejor que uses transform:scale de css3...

Código HTML:

.col .imagen { 
transition: 1s;
}

.col .imagen:hover { 
transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2); /* IE 9 */
-webkit-transform: scale(1.2,1.2); /* Chrome, Safari, Opera */
}