Mil Trucos Blogger

Imagen con texto sobrepuesto en Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

En esta oportunidad les traigo un genial truco que consta de una imagen con texto sobrepuesto en Blogger:


Para agregar este truco ve a la Edición HTML de tu blog y antes de ]]></b:skin> agrega lo siguiente:

.imagen-con-historia {
    position: relative;
    display: block;  
    padding:0;
    width: 500px;
    margin: 0 auto;
}
.imagen-con-historia img {
    max-width:500px;
    max-height:auto;
    z-index:1;
    border:none;
    margin:0;
    padding:0;
}
.imagen-con-historia span {
    background: #111;
    opacity:0;
    margin:0;
    -moz-transition: 400ms;
    -webkit-transition: 400ms;
    -o-transition:400ms;
    transition: 400ms;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 480px;
    padding: 10px;
    border-top: 1px solid #999;
    z-index:10;
}
.imagen-con-historia span:hover {
    opacity:.55;
}

Guardas los cambios.

Ahora cada vez que quieras utilizar una imagen con texto ve a la Edición HTML de la entrada y pega el siguiente código:

<div class="imagen-con-historia">
<img src="URL-IMAGEN" />
<span>
Escribe el texto que contendrá la imagen acá
</span>
</div>

Vía/Ayuda Bloggers 

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

8 Comentarios

  1. Enero 29, 2012    

    Hola! Yo no veo más ke el texto en negro pero la imagen no sale :-S… parece buenísimo pero no sé ké pasa ke no aparece =(

    • Enero 29, 2012    

      Merlina eso depende del navegador que uses,yo uso Google Chrome y lo veo muy bien.

  2. Enero 29, 2012    

    Hola Juvinao!

    Estoy haciendo unas cuántas modificaciones en la plantilla de mi blog, y necesito tu banner de 128×128. Por favor, no me pases el de 125×125 ya que si coloco de 125125 la sidebar se me desfigura completamente, y no sé por qué.

    P.D: Buen post, yo ya lo tenía colocado en mi blog! xD

    Saludos Juvinao ! 😉

    • Enero 29, 2012    

      Ok amigo mañana te lo paso ok. 😀

  3. Enero 30, 2012    

    Ah ok, es ke como no lo informas en el post pensé ke funcionaba con cualkier navegador =P.

    • Enero 30, 2012    

      Si se me paso por alto,gracias por comentar 😀

  4. Juan Juan
    Febrero 4, 2012    

    Esta bueno este codigo pero lo malo
    es que si la imagen es mas grande o mas chica el cuadro de texto no sera igual en todas la imagenes, sino que estara o mas chico o mas grande.
    Tienes que modificar el “width: 480px;” pero se modificara en todas la imagenes q tengas y sera el mismo problema nuevamente.

    Hay otra forma de hacerlo para que quede bien el cuadro de texto en cualquier tamaño de imagen??

    Pero para hacerlo en una sola imagen esta bien. Gracias por el codigo xD

    • Febrero 5, 2012    

      Juan voy a mirar que se puede hacer para arreglar este pequeño problema con el codigo.Saludos 😛

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo