Ampliar una imagen cuando pasas el ratón por encima en tu blog de blogger blogspot


Si quieres que cuando pasas el ratón por encima de una foto ésta se amplie debes seguir una serie de pasos:

1) Vamos a Diseño
2) Edición HTML
3) Buscamos </head> (tecleamos Ctrl + F para buscar más rápido)
4) Justo antes pegamos el siguiente código:



<style type='text/css'>
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: black;
padding: 5px;
left: -100px;
border: 5px solid black;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
}
</style>



5) Clicamos en vista previa y si todo está bien le damos a guardar plantilla
6) Sólo nos queda que cuando vayamos a escribir una entrada y queramos usar este efecto escribir el siguiente código en la misma entrada que estamos escribiendo:



<a class="thumbnail" href="#thumb"><img src="LINK de la imagen" width="100px" height="80px" border="0" /><span><img src="LINK de la imagen" /><br />Pie de foto</span></a>



Cambiamos donde pone LINK de la imagen por la dirección de la imagen que queremos mostrar con este efecto y ya está todo hecho.

11 comentarios:

  1. Muchas gracias a ti Luca.

    Gracias por tu comentario. Espero volverte a ver por aquí. Mil gracias ;)

    ResponderEliminar
  2. dISCULPA HE UTILIZADO ESTE EJEMPLO Y TODO ME RESULTA PERFECTO Y TODO ME SIRVE, PERO OCURRE QUE CUANDO SUBO ESTAS MODIFICACIONES AL HOSTING DE MI PAGINA ME DESAPARECE TODO Y NO ME MUETSRA NADA! QUE PASARA? PEOR CUANDO PRUEBO LA PAGINA SIN ESTAR MONTADA OSEA NORMAL EN LA PC ME MUESTRA TODO MUY BIEN!

    ResponderEliminar
  3. Hola Georgina. Gracias por tu visita y gracias por comentar. Te agradecería que no escribieses en mayúsculas, ya que en el lenguaje de internet significa que estás gritando, además de ser molesto a la vista.

    Si empleas un hosting externo a blogger no sé ayudarte. Mi hosting es el gratuito que ofrece blogger al abrir el blog.

    Siento no poder ayudarte. Un saludo.

    ResponderEliminar
  4. ok gracias! jeje y no gritaba! Disculpa. utilizo un hosting pago, ya yo tengo una web montada pero me pidieron agregarle una galeria y quise tomar este ejemplo para ello y todo me funciona perfecto pero cuando lo monto en en el hosting y me meto en la pagina solo me muestra el encabezado y el resto esta vacio como si no pudiese mostrar las imagenes.

    ResponderEliminar
  5. No pasa nada, no te preocupes.

    Quizá deberías contactar con el proveedor de servicios de tu hosting, si tienen atención en línea de pueden ayudar. Yo en ese tema soy un cero a la izquierda, me sabe mal. En otro tema estaré encantado de ayudarte.

    Un saludo.

    ResponderEliminar
  6. Hola. Lo que quiero hacer no es que aumente la imagen cuando paso el raton, sino que muestre una etiqueta de texto, como en las imagenes con enlace.
    ¿como hago?
    Gracias anticipadas.

    ResponderEliminar
  7. Hola T360R. Tú mismo te respondes, deberás hacerlo como una imagen con enlace. Aquí tienes cómo hacerlo: http://www.quierocrearunblog.com/2009/07/poner-un-enlace-con-imagen-en-blog-de.html

    ¡Un saludo!

    ResponderEliminar
  8. Ya hombre, pero no quiero que sea un enlace. simplemente una imagen que si le pongo el raton encima me salga la etiqueta.
    Ya intente hacerlo copiando trozos de codigo de un enlace con imagen, pero no me sale.

    ResponderEliminar
  9. Pues sería así: <a><acronym title="TITULO IMAGEN">
    <img src="http://URLdeLAimagen.jpg"/>
    </acronym></a>

    Le he quitado el link a la web.

    ResponderEliminar