.imgteaser { /* es el bloque general */
margin: 0 auto; /* lo centramos */
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 { /* la imagen en si misma */
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;
}

Como aplicar efectos a las fotos del blog

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.

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?



Suscríbete a mis entradas por email ¡para no perderte nada!

♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥

Te encantará:

The following two tabs change content below.

Celia

Diseñadora, Mentora y Formadora Online at El Perro de Papel
Mamá y emprendedora a tiempo completo. Ayudo a otras mujeres y madres soñadoras a emprender un negocio online de éxito para conciliar su vida personal y profesional.Si este artículo te ha gustado, sigue aprendiendo conmigo en mi reto gratis de 14 días para conectar con tu mejor versión CLICK AQUÍ.Y AQUÍ tienes mi curso premium para mamás emprendedoras que quieren hacer realidad su idea genial, mano a mano, conmigo.¡Que tengas un feliz día, soñadora!

Pin It on Pinterest

Share This

¿CANSADA DE TRABAJAR TANTAS HORAS SIN VER LOS RESULTADOS ESPERADOS?

Te regalo mi CURSO GRATIS DE 5 DÍAS para mamás emprendedoras que quieren conciliar su vida personal y profesional sin volverse locas ni renunciar a sus sueños.

¡Bienvenida! Ahora revisa tu correo ;)