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...
imagen1 imagen2 imagen3 imagen4 imagen5

   Obteniendo como resultado algo como esto...

Carlitox en la WebCSSMediaRSSconstruccion

8 Comentarios

Escribir Comentario
Martín
AUTOR
21 de mayo de 2012, 13:55 delete

Hola Carlitos, consulta; hay manera de agregar un link a cada imagen?
Gracias y espero tu respuesta.

Responder
avatar
Martín
AUTOR
21 de mayo de 2012, 14:00 delete

Hola Carlitos, consulta; hay manera de agregar un link a cada imagen?
Gracias y espero tu respuesta.

Responder
avatar
LisanUIO
AUTOR
23 de mayo de 2012, 11:03 delete

Muchas gracias por el tutorial Carlitox es justo lo que buscaba. Saludos

Martín dentro de a class="slide" dejas un espacio y colocas el link con solo href

saludos

Responder
avatar
23 de mayo de 2012, 17:13 delete

Tal como te dice LisanUIO, esto es solo una clase, para que tengan un enlace coloca un simple "href" dentro de la etiqueta.

Responder
avatar
Martín
AUTOR
27 de mayo de 2012, 12:50 delete

Gracias me fue de mucha utilidad!!

Responder
avatar
Anónimo
AUTOR
10 de septiembre de 2012, 1:27 delete

donde es que debo pegar el codigo dentro de la pagina?

Responder
avatar
10 de septiembre de 2012, 8:07 delete

El ejemplo es claro, la primera parte es el estilo, el css, va dentro de los tags "style" o en tu archivo "css", y el otro es el html, simplemente colócalo donde quieras mostrar el efecto...

Responder
avatar
Jon Jona
AUTOR
14 de noviembre de 2015, 21:26 delete

apenas tengo un año de haber comenzado la programación, cuando aprenderé siempre tendré perseverancia para lograrlo quieren saber no desprendo del código

Responder
avatar

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión EmoticonEmoticon