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

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

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?

Programador y Desarrollador Web. Administrador de RibosoMatic y Proyecto Yupy. Blogger y entusiasta de la tecnología, internet, software y tutoriales para desarrollo de aplicaciones para la web ....