Hacker of the Web
Tus ideas en código!...y mas

Ampliar imágenes con mouse y CSS

Ya habíamos explicado un código para ampliar imágenes con el mouse y Javascript y gracias a el comentario de Italo Disco Style, que preguntaba si se podía traducir a ese código Javascript a CSS. Lo cual dio resultado a lo siguiente.

El inconveniente aqui es que no usaremos javascript, por lo que necesitaremos definir cada uno de los ID de cada imagen.

El código CSS es el siguiente:

#img {
width:300px; /* Este es el ancho de la imagen pequeña */
height:400px; /* Este es el alto de la imagen pequeña */
background: url(URL DE LA IMAGEN REDUCIDA) no-repeat top left;
border:none;
}

#img:hover {
width:410px; /* Este es el ancho de la imagen grande */
height:546px; /* Este es el alto de la imagen grande */
background: url(URL DE LA IMAGEN GRANDE) no-repeat top left;
}


El código HTML es el siguiente:
<img id='img'/>


Lo que cabe rescatar es que para cada imagen en la que utilices este efecto deverás colocarle un id='img1',id='img2', es decir que incremente cada imagen y lo mismo con el CSS, #img1, #img2.
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

4 comentarios !

Julio Sánchez dijo...

Hola,

tengo un problema al aplicar este código en mi página:

Las imágenes que quiero ampliar están dentro de una celda de una tabla, por lo tanto, cuando la imagen se amplia se amplia toda la celda. ¿Se podría hacer de alguna forma para que la imagen ampliada se viera fuera de la celda y así no afectara a la tabla?.

Muchas gracias,
Julio Sánchez

Sexshop dijo...

Yo lo tengo probado, es un buen aporte. XD

SäNTÿ dijo...

Sexshop, gracias ;P!!

Se podría utilizar también para proteger imágenes, para que sea mas difícil que te las copien ;P

Saludos!!

geotermia dijo...

Gracias, funciona OK, ya lo estoy aplicando para mi nueva remodelación de la web


Página Principal
Arriba