Como añadir un cuadro deslizante con texto a una imagen

ñáúéá

Ya hemos aprendido a modificar el tamaño de nuestras fotos y añadirles un marco a juego con los colores de nuestro blog. Hoy, vamos a ir un poco más allá: añadir efectos a nuestras fotos.
Las fotografías, como ya hemos comentado varias veces, son uno de los reclamos más eficaces de nuestro blog, por ello, debemos cuidarlas y prestarles atención, optimizar su tamaño, colocación y revisar cada detalle.
Por eso, hoy quiero compartir con vosotros un efecto muy chulo que encontré en una de mis excursiones por internet y estaba deseando probar.

Imagen con cuadro de texto deslizante

El código que vamos a usar es:

<div class="imgteaser"><a href="javascript:void(0);"><img src="URL DE LA IMAGEN" /><span class="more">♥ Leer Más</span><span class="desc"><strong>TITULO</strong>TEXTO</span>

Necesitamos tener la imagen alojada en un servidor externo, tipo dropbox, puedes descargarlo y aprender a manejarlo con este tutorial.
Este código tenemos que pegarlo, en Vista HTML, en la zona de nuestra entrada donde queramos que aparezca la imagen.
URL DE LA IMAGEN: la ruta de nuestra imagen.
LEER MAS: el texto que aparecerá en el cuadrado inferior izquierda.
TITULO: el título que queramos darle a nuestra fotografía.
TEXTO: la explicación de lo que queremos transmitir.
Mi código personalizado sería éste:

<div class="imgteaser"><a href="javascript:void(0);"><img src="http://3.bp.blogspot.com/-uTxk9_wuSzI/UhP9wBtxA0I/AAAAAAAAHO4/1PwWV8FBSxs/s1600/CABECERO.png" /><span class="more">♥ Leer Más</span><span class="desc"><strong>El Perro de Papel</strong>
      Diseño Gráfico Personalizado para tu Blog</span>

Y el resultado sería el de la imagen inferior. Pero aún queda lo más importante.
Aplicar un estilo con CSS a nuestra imagen para que el efecto deslizante se lleve a cabo al pasar el cursor.
» Leer MásEl Perro de Papel Diseño Gráfico Personalizado para tu Blog

Añadir estilo con CSS a la fotografía

El código que vamos a usar es éste:

<style type="text/css">
  .imgteaser
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width:600px; /* establecemos el ancho total (imagen + marco) */
  }
  .imgteaser a {text-decoration: none;}
  .imgteaser a:hover {cursor: pointer;}
  .imgteaser a img
    background-color: #456; /* el color del marco */
    border: none;
    margin: 0;
    padding: 10px; /* le ponemos un marco alrededor */
    width: 580px; /* forzamos el tamaño de la imagen */
  }
  .imgteaser a .more { /* es el área traslúcida de LEER MAS */
    background-color: #123;  /* color de fondo */
    /* las propiedades del texto */
    color: #FFF;
    font-size: 14px;
    padding: 5px 10px;
    /* transparencia */
    filter:alpha(opacity=65); /* IE genérico */
    opacity:.65; /* Firefox */
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)'; /* IE8 */
    /* posicionamos ese texto abajo y a la izquierda sin importar la altura de la imagen */
    position: absolute;
    bottom: 14px;
    right: 10px;
  }
  .imgteaser a .desc {display: none;}
  .imgteaser a:hover .more {visibility: hidden;}
  .imgteaser a:hover .desc { /* es el texto del caption en si mismo */
    background-color:#345; /* color de fondo */
    display: block;
    margin: 0;
    width: 580px; /* ocupará el mismo ancho de la imagen */
    /* las propiedades del texto */
    color: #FFF;
    font-size: 12px;
    padding: 10px;
    /* transparencia */
    filter:alpha(opacity=75);
    opacity:.75;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
    /* lo posicionamos abajo y a la derecha sin importar la altura de la imagen */
    position: absolute;
    bottom: 14px;
    left: 10px;
  }
  .imgteaser a:hover .desc strong { /* el texto LEER MAS */
    display: block;
    font-size: 14px;
    line-height: 2em;
  }
</style>

Las partes que están en rojo, son las que podéis modificar para adaptarlas al diseño de vuestro blog.
*En tutoriales anteriores sobre programación ya hemos visto como modificar los colores y los tamaños, como en éste sobre como instalar un menú con pestañas personalizado. 
* Si te los has perdido, échales un ojo para que te sea más sencillo personalizar tu código.
Lo ideal es que tengáis un blog de pruebas, ya que el efecto del cuadro deslizante no se ve en Vista Previa, tenéis que publicar la entrada e ir probando.
Para personalizar el diseño del cuadro deslizante, tenemos que pegar el último código justo al inicio de nuestra entrada, sin que haya nada delante, en Vista HTML.
En nuestro blog de pruebas, publicamos la entrada.
Y vamos personalizando el código hasta que quede a nuestro gusto.
Si has seguido el tutorial paso a paso, habrás notado que he puesto los códigos desordenados, pero me parecía más sencillo empezar por el código de la imagen, que puede ponerse en la posición que quieras de la entrada y terminar con el estilo a aplicar, que es más complicado y va justo al inicio de la entrada.
Puede que este tutorial sea un poco más complicado que los anteriores, pero ¡es que ya hemos visto las nociones básicas! Ha llegado la hora de darle caña al tema de la programación ¿no os parece?


¿Te ha resultado interesante esta entrada?
¡¡Compártela en tus redes sociales!!
Puede que a alguno de tus contactos también le resulte útil 
Gracias ♥