Ampliar miniaturas con CSS

Lo que vamos a hacer no es literalmente lo que el título promete, pero sí que vamos a conseguir ese mismo efecto.

La cosa es que en el truquillo que vamos a utilizar, la sensación será la de ampliar una miniatura al pasar el puntero por encima de ella, pero realmente lo que haremos será "esconder" mediante propiedades CSS, la mayor parte de la imagen, de manera que la porción que se verá hará de miniatura. Posteriormente, mediante las propiedades del HOVER conseguiremos que la imagen vuelva a mostrarse completa.

Todo se basa en CSS por lo que crearemos una clase nueva (.miniatura), que luego aplicaremos a nuestras imágenes. La asociaremos al tag que forma los párrafos (P) para una mayor faciidad en su aplicación:

p.miniatura{
float:left;
margin:0;
background:#000000;
border:1px solid #000000;
padding:2px;
}
p.miniatura a {
display:block;
float:left;
width:100px; /* Tamaño miniatura */
height:100px;
line-height:100px;
overflow:hidden; /* La miniatura no sobrepasará los límites */
position:relative;
z-index:100; /* Valor inferior al que lleve el HOVER */
}
p.miniatura a img {
float:left;
position:absolute;
top:-50px; /* Desplazamiento sobre esquina superior izquierda */
left:-150px;
}
p.miniatura a:hover { /* Lo que ocurrirá al pasar el puntero */
overflow:visible; /* Se permite que la imagen rebase los límites */
z-index:200; /* Valor superior al que lleve el enlace */
border:0px;
}
p.miniatura a:hover img {
border:5px solid #000000;
background:#ffffff;
padding:2px;
/* La imagen grande se desplaza un poco para poder ver las miniaturas */
top:30px;
}

Una vez creado el estilo, ya lo podemos aplicar a cualquier imagen que insertemos en cualquier parte del blog. Necesitaremos asignarle un tag de párrafo con la clase miniatura y añadirle un enlace vacío. Si se desea, el enlace puede ser a una dirección.

<p class="miniatura"><a href="javascript:void();"><img style="width:400px;" src="URL_IMAGEN"/></a></p>

Como veis, la imagen puede incluir un WIDTH para forzar su salida con determinado tamaño. Esto es útil si queremos aplicarlo a una especie de galería de imágenes y no queremos tener que editarlas previamente para hacerlas del mismo ancho.

El truco no funcionará si alguna capa contenedora superior tuviera una propiedad overflow:hidden. En este caso, no lograríamos que se viera la imagen original y la única solución sería cambiarlo a overflow:visible, aunque dependiendo de las plantillas, eso puede estropear otras cosas. Es cuestión de probar. En las plantillas Blogger, el content-wrapper suele tener este atributo.

Y esto lo hemos aprendido en CSS Globe, dónde podeis ver cómo hacer lo mismo mediante listas.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter