Ampliar miniaturas con CSS | Oloblogger 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 tru...

1 de marzo de 2010

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
Copy URL

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

follow us in feedly

48 comentarios :

  1. Oloman, tengo una cuestion.

    Si yo por ejemplo dibujo una imagen con el programa de dibujo paint y lo guardo en mi pc, ¿cómo lo hago para subirla en internet como .png?

    Besos

    ResponderEliminar
  2. Hola. Cuando tengas la imagen en Paintbrush, simplemente seleccionas "Guardar como". En la ventana dónde debes escribir el nombre del fichero, debajo precisamente de "Nombre", tienes un desplegable llamado "Tipo". Si buscas ahí PNG, lo seleccionas y aceptas, la imagen se guardará en este formato en tu disco duro. Luego sólo tienes que subirla.

    ResponderEliminar


  3. Amigo Oloman,

    Me has solucionado el problema que te planteé en el post anterior a éste, pero te dejo aquí mi comentario de agradecimiento, para que todo el mundo se entere. Realmente eres un genio de la Informática y de la Pedagogía. Me has dado una explicación diáfana y fácil de comprender para cualquiera, incluso yo que, de Informática, pues eso, que ando un poco perdido.

    Tan grande es mi agradecimiento por el interés que te has tomado en resolver mi problema, la rapidez con la que lo has hecho, y la forma gratuita de hacer las cosas, que te digo que, si fueras una mujer, yo me pondría a tus pies, en señal de agradecimiento, pero, como eres un hombre, hecho y derecho, me voy a mantener de pie, no sea que alguien pueda pensar lo que no debiera.

    De verdad que eres una persona de las que ya quedan pocas, y tu generosidad no tiene límites.

    No obstante, si consideras oportuno enviarme la factura de la minuta de tus servicios, yo estaré dispuesto a pagar lo que sea, pero, claro, tendrías entonces que explicarme cómo me lo monto para pagar por Internet.

    Te envío un cordial abrazo,

    Antonio Martín Ortiz.

    PD.: Tengo conocimientos, creo, suficientes de Latín y Griego. Si algún día necesitas algo relacionado con este tema, ya lo sabes, aquí me tienes.

    ResponderEliminar
  4. Bueno, bueno, que la cosa no es para tanto Antonio, aunque se agradece igualmente la loa.

    Ya sabía de tus conocimientos, pero me da a mí que posiblemente no necesite en mucho tiempo de esas lenguas que tú quieres mantener vivas aunque oficialmente ya no lo sean, por lo que espero no olvidarme.

    ResponderEliminar
  5. Amigo Oloman! como va?
    te hago una consulta. en este post nos explicas como reemplazar el logo bloger.
    Pero como hago para que las fotos de los perfiles de los que tienen cuenta en google no se les reemplace tambien?

    PD: en el blog de Los Pibes hay animaciones flash creadas por mi. Mandale Play y empiezan! saludos. :D

    ResponderEliminar
  6. HOLA OLOMAN

    COMO PUEDO INSERTAR UN ENLACE EN LA IMAGEN GRADE..
    SOY NAVATO AYUDAME POR FAVOR

    ResponderEliminar
  7. Hace tiempo, en mis inicios como blogger, intenté algo similar, pero como no tenía mucha idea, y mi plantilla (la actual, pero a la que le queda ná para cambiar) con su columna de 400 pixels se comía la imagen grande... La solución era esa que dices: overflow:visible.

    De todas formas, me he acostumbrado demasiado a los efectos JS y me parece un poco abrupta la manera de aparecer y desaparecer la imagen... Me he vuelto algo delicado en ese sentido, ¡je, je, je!

    ResponderEliminar
  8. Rodry D, el truco que has visto no es compatible con los avatares. Sólo sirve para quitar el logo de Blogger cuando estos no están activados. Prueba con este otro post que, dependiendo de lo que quieras hacer exactamente, podría ayudarte.

    El danger, sólo tendrías que sustituir javascript:void(); por la dirección de enlace.

    José GDF, a mí también me gustan las transiciones suaves, pero hay que tener en cuenta que los scripts poco a poco nos van haciendo la página cada vez más pesada. Es sólo una opción más.

    ResponderEliminar
  9. Gracias por tu ayuda, pero ¿ Podrías recomendarme algun sitio para subir imágenes por internet?

    Es que he estado buscando y he encontrado muchos que no me satisfacen. ¿ Tú cual usas ?

    Gracias :)

    ResponderEliminar
  10. Si tienes un blog Blogger, en mi opinión el mejor sitio es el propio Blogger (que es casi lo mismo que decir Picasa). Este el servicio que yo utilizo, aunque si lo que quieres es subir imágenes sin tener un blog, entonces mis preferencias por este orden son: Imageshack, Flickr, Picasa y Photobucket.

    ResponderEliminar
  11. gracias oloman! queda mejor ahora.
    pero... una entrada dice que tiene 0 comentarios cuando en realidad tiene 8. si cliqueas en los comentarios, se ve que son 8.
    como lo soluciono?

    web: http://galaxiapower.blogspot.com/

    es la ultima entrada que se ve.

    ResponderEliminar
  12. Tranqui. Acabo de contestar a esa misma pregunta en este comentario.

    ResponderEliminar
  13. gracias, voy a esperar entonces. es raro porque a algunas entradas nomas pasa eso. :S
    y sucedió justo hoy que cambie (mejor dicho reemplace) el espacio vacio de los comentarios anonimos por una imagen. en el blog que te deje arriba solo cambio la fotito en los que dicen bien la cantidad de comentarios que hay.
    gracias nuevamente y cuando se solucione te aviso. :)

    ResponderEliminar
  14. Por el momento sigue mal :S

    ResponderEliminar
  15. Tranqui que es posible que pase una semana y siga sin solucionarse. Ya me han dejado algunos avisos más sobre esto.

    ResponderEliminar
  16. ah ok. soy impasiente! jaja muchas gracias por la info.
    espero que cuando tengas un tiempito te pases por mis blog (por lo menos al de Rodry's Company) y dejar un comentario :D
    saludos!

    ResponderEliminar
  17. Hola.Con relación a la ampliación de la miniatura, no lo he conseguido hacer. Por favor, me podrías decir en qué parte de la plantilla pongo el código CSS , y si donde dice "URL de la imagen", hay que poner la dirección de la imagen que deseemos que se vea en tamaño más grande, ya en el código html de la entrada. gracias

    ResponderEliminar
  18. En Blogger, la parte CSS es la que está entre las etiquetas SKIN. Ahí es dónde tienes que insertar la parte de estilo. Y con respecto a la segunda parte de tu pregunta... sí, es cómo dices.

    ResponderEliminar
  19. Muchas gracias.Ya he conseguido que funcione.Lo que ocurre es que si la imagen tiene más de 400 px de ancho, p.ej.700, en esta plantilla rounder 3, no se ve completa, queda tapada por la barra lateral en la drecha y por la zona oscura izquierda. ¿Tiene esto solución?

    ResponderEliminar
  20. Hola tocayo. Tendrías que ver el tema del posible OVERFLOW en esa plantilla, en el penúltimo párrafo de esta entrada

    ResponderEliminar
  21. Efectivamente, oloman, en esta plantilla lo he encontrado debajo de page Structure, outer-wrapper, main-wrap1, en donde he cambiado "hidden" por "visible", y funciona perfectamente.Ya no sé si, como avisas en la entrada, se me cambiará algo del blog.Estaré pendiente. Muchísimas gracias por ayudarme.

    ResponderEliminar
  22. Sólo copia tal cual y añade la dirección de una imagen para probar. El estilo lo pones antes del cierre del SKIN y la otra parte en un post.

    ResponderEliminar
  23. Lo tendrías que poner en algún sitio y dejarlo para que lo viera y así saber qué es lo que pasa, Rodry.

    ResponderEliminar
  24. te mande un mail con la plantilla.
    gracias oloman ;)

    ResponderEliminar
  25. Esa parte está bien Rodry ¿En que post tienes la imagen?

    ResponderEliminar
  26. ejemplo, aca: http://lospibesjvn.blogspot.com/2009/03/prueba.html

    ResponderEliminar
  27. Ya está visto. Pusiste la clase en un DIV y este CSS es para un párrafo (P). Cambia div class="miniatura" por p class="miniatura". No olvides también cambiar el /div por un /p.

    ResponderEliminar
  28. ahhh gracias oloman! aca quedo: http://lospibesjvn.blogspot.com/2009/03/prueba.html
    lo malo es que no se ve completa, es decir se ve solo la parte de las entradas.

    ResponderEliminar
  29. ¡Arghhh! Me fastidia cuando preguntais sin leer bien la entrada... Penúltimo párrafo ;)

    ResponderEliminar
  30. AVISO: solo hasta 40 se le puede aplicar. Sino desp parte de las entradas desaparecen si te pasas de 40. ;)

    ResponderEliminar
  31. Realmente depende más del peso de las imágenes que de su número. En la segunda parte de este post se comenta eso:

    http://oloblogger.blogspot.com/2010/03/problemas-que-se-solucionan-solos-o-no.html

    ResponderEliminar
  32. ...Ahh :) Oloman esta entrada esta muuy buena, me encantan los efectos que no usan scripts... luego lo pruebo...

    Sabes que estoy buscando el tutorial donde explicas como desplegar el contenido al hacer click sobre este (sin efecto deslizante) tipo como el se muestra en las solapas y que puedes usar en los posts o en las columnas laterales, espero que me haya explicado..., creo que tu lo usas en tus entradas para "esconder" cierto contenido (los cOdigos) y luego el ususario los puede expandir al hacer click ...

    :) Muuuchas Gracias y gusto en saludarte Oloman!!!

    ResponderEliminar
  33. Hola Karla
    Seguramente te refieres a esta entrada y la siguiente:
    http://oloblogger.blogspot.com/2008/02/elementos-que-aparecen.html
    Un saludo

    ResponderEliminar
  34. LLevo un par de dias desde que he descubierto tu blog trasteando y mirando, ojala lo hubiera descubierto antes, ya que es un pozo de información sin fondo... muchas gracias por todo tu trabajo...

    Y a lo que voy en este ejemplo de la imagen, si por ejemplo quisiera que el acercar el raton le afectara a todas las imagenes de los post, como lo haria sin necesidad de cada vez tener que escribir o crearme una plantilla para ello

    Mi blog es este, lleva una ong de un banco de alimentos..., por si te interesa echar un vistazo o a alguien le interesa ver lo que hacemos, aqui esta http://smmbancoalimentos.blgspot.com

    ResponderEliminar
  35. Aliastaz, la primera parte de código (CSS) es para colocar en la plantilla una sola vez. Cuando lo tengas ahí, funcionará para cualquier imagen a la que le añadas la marca de párrafo (p) y la clase indicada (class="miniatura"). No sé si es a esto a lo que te refieres.

    Si lo que quieres es ampliar todas las imágenes sin tener que añadir nada en ellas, desconozco si hay algún otro sistema.

    ResponderEliminar
  36. Exacto Oloman me refiero a eso segundo que no sabes como hacer, que todas las imágenes colocadas en cada uno de los post, sin tener que añadir nada explicito en ellas se amplien

    ResponderEliminar
  37. Pues lo dicho, no conozco nada para eso. Con Lytebox, Lightwindow y similares (ventanas modales), siempre hace falta añadir algún atributo.

    ResponderEliminar
  38. Hola Oloman

    Me parece sencillamente espectacular este truco. Funciona de mil maravillas en Crhome, pero no en internet explore, Cuando paso el ratón por encima de las imagenes, éstas se expanden y quedan dentrás del texto del primero articulo que tengo publicado. ¿Cómo poder arreglar esto?

    ResponderEliminar
  39. Juan Carlos M., tienes muchos blogs y no puedo concretar más, pero puede deberse a algo particular de tu plantilla como lo que explico en el último párrafo. Puedes comprobar en IE que esta misma entrada funciona sin problemas en ese navegador.

    ResponderEliminar
  40. Oloman, tengo un problema, al principio de este post dices.
    crearemos una nueva clase (.miniatura) y luego las imagenes las asociaremos con un tag.
    a que te refieres exactamente?
    mi problema mas grande es encontrar donde poner ese codigo que pones al principio.
    ya lo intente con un gadget, entre mis post, etc y nada!! te agradeceria tu respuesta.
    Saludos.

    ResponderEliminar
  41. http://infranautas.blogspot.com/
    ese es el blog, pero pronto lo renombrare y terminare.. por que apenas esta en pruebas... es beta por decirlo asi.

    ResponderEliminar
  42. Francisco, siempre intento explicar las cosas para que se entienda lo que estamos haciendo y no todo consista en copiar y pegar.

    Lo de crear clases es generar nuevo código CSS con determinadas propiedades y un nombre propio. Cuando le apliquemos ese nombre propio a algún elemento HTML, este tomará las propiedades que definimos anteriormente para esa clase. Lo del tag se refiere a que utilizaremos esto en combinación con P, la etiqueta para párrafos.

    Pero de forma práctica, lo que tienes que hacer es poner la primera parte de código (CSS) en la parte dónde va todo el CSS (antes del cierre SKIN). Luego, para formar la galería tienes que usar la estructura del segundo trozo de código. Eso otro es HTML y se coloca dónde quieres que aparezca, en este caso, las imágenes. Esta estructura la tendrás que repetir tantas veces como imágenes quieras mostrar, utilizando en cada caso la dirección particular de cada imagen.

    Espero que ahora se entienda un poco mejor ;)

    ResponderEliminar
  43. Oloman, he querido hacer lo de ampliar miniaturas y lo he puesto en la plantilla el caso es que ahora no se ven todas las entradas en la página principal, sabrías decirme donde tengo que ir para arreglarlo? gracias

    ResponderEliminar
  44. Oloman, dándole vueltas era algo de la fechas, parece ser que la plantilla no coge fecha anteriores…o algo así, el caso es que le he puesto actualización automática y si entra…

    ResponderEliminar
  45. Ana U., entonces ¿problema solucionado? Es que no entendí muy bien lo que te ocurre, pero si dices que ya está arreglado, me ahorro verlo porque como ves, ando con retraso...

    ResponderEliminar