Agrandar imagenes con CSS

   Como lo habrán notado, recientemente mis posts están relacionados a efectos, sobre todo a las nuevas propiedades del CSS3, ya que son buenas a pesar de que aún no esten aprobadas como estándares por la W3C, la cuestión es que me gustan mucho estos efectos que podemos lograr con esta novedad, para conseguir el agrandado colocamos el CSS respectivo...

.contenedor {
position:relative;
margin-left:10px;
margin-bottom:100px;
z-index:300;
}

.imagenes {
position:absolute;
left:0; top:0;
}

.slide {display:block;
border:0;
text-decoration:none;
float:left;
border-right:1px solid #fff;
}

.ultimo{border:0;}

.slide img {
display:block;
border:0;
width:60px;
height:40px;
cursor:pointer;
-webkit-transition-duration: .7s;
-moz-transition-duration: .7s;
-o-transition-duration: .7s;
}

.slide:hover img {width:480px; height:320px;}

   Como podemos ver es algo muy simple, siempre utilizo un div aparte para crear un contenedor, no es necesario pero siempre es aconsejable, explico un poco de que va el código.

   "-transition-duration" define la duración que tendrá la imagen mientras se agranda. (se coloca moz, webkit y @ para los distintos navegadores).

   border-right:1px solid #fff es para crear un borde y separar un poco las imágenes, lo coloco de color blanco para que no se note, pero si queremos podemos cambiarle el color y hacer que este en recuadros.

   .slide:hover img {width:480px; height:320px;} nos define que el tamaño que tendra la imagen al momento que pasamos el mouse sobre ella.

   Y por último z-index:300 el cual pongo ese valor (un tanto exagerado) para que este por encima de cualquier otro objeto que este en ese espacio.

   Una vez definido el CSS y adaptado a nuestro gusto, pasamos al HTML respectivo...

   Obteniendo como resultado algo como esto...

Recibe notificaciones por correo