Agregar descripción en la parte inferior de las imágenes web con CSS

3
4011

EjemploAlgunos sitios web dentro de sus artículos integran un cuadro con una imagen y una pequeña descripción en la parte inferior de esta. Esto es ventajoso por que un usuario normal por lo general lo primero que mira no es texto sino contenido gráfico, y que mejor si este está acompañado de una pequeña descripción de lo que trata. Así se sentirá impulsado a leer el artículo completo. Además es una buena práctica SEO, pues estos textos cercanos a las imagenes sirven para los motores de búsqueda de imágenes.

¿Cómo lograrlo?

Con unas simple líneas CSS y HTML podemos lograr añadir textos descriptivos debajo de las imágenes.

Primero el código de estilos, dentro de las etiquetas <head>:

 <style type="text/css">
.picture {
background-color: #F9F9F9;
border: 1px solid #CCCCCC; padding: 3px;
font: 11px/1.4em Arial, sans-serif;
}
.picture img {
border: 1px solid #CCCCCC;
vertical-align:middle;
margin-bottom: 3px;
}
.right {
margin: 0.5em 0pt 0.5em 0.8em;
float:right;
}
.left {
margin: 0.5em 0.8em 0.5em 0;
float:left;
}
</style>

Ahora dentro del <body> de nuestro documentos html:

<div class="picture left" style="width:220px;"> 
<img src="marte.jpeg" alt="Planeta Marte" width="210" height="210" /> <br />
Marte, apodado a veces como el Planeta Rojo, es el cuarto planeta del Sistema Solar.
</div>

Por supuesto luego de esas líneas puede venir en contenido completo del artículo ó tema que trata la página.

Podemos colocar la imagen a la izquierda ó derecha, como gustemos y se vea mejor. He aquí un ejemplo. ¿Verdad que se ve mas atractiva una página web de esta forma?

3 COMENTARIOS

Comments are closed.