CSS - Como hacer un pie de foto

   
Vista:
Imágen de perfil de Jesus

Como hacer un pie de foto

Publicado por Jesus (1 intervención) el 29/06/2016 19:31:37
Hola Miren mi duda es como puedo hacer un pie de foto como el de esta imagen
Sin-titulo

Gracias por su atencion y espero respuestas.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Como hacer un pie de foto

Publicado por xve (351 intervenciones) el 29/06/2016 23:46:40
Hola jesus, te acabo de publicar un código que hace exactamente lo que solicitas:
http://www.lawebdelprogramador.com/codigo/CSS/3566-Poner-un-texto-encima-de-una-foto-en-la-parte-inferior-de-la-misma.html
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Como hacer un pie de foto

Publicado por Carolina Vazquez (6 intervenciones) el 04/07/2016 21:44:48
Hola esta es una forma...

1
<div class='img'><img src='URL_IMAGEN'/><span>PIE_DE_IMAGEN</span></div>

Para que se arregle y no salga tan feo puedes poner lo siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div.img{
  display:table;
}
div.img img{
 margin:0;
 padding:0;
}
div.img span{
 line-height:normal;
 font-size:11px;
 display:table-caption;
 margin:0;
 background:#646464;
 color:white;
 font-style:italic;
 padding:5px;
 text-align:center;
}

Esto es si lo quieres transparente:

El código que debes agregar con cada imagen es el siguiente:
1
<div class='img'><img src='URL_IMAGEN'/><span><span>PIE_DE_IMAGEN</span></span></div>
Mientras que lo que se agrega en Diseño>Edicion HTML justo antes de la etiqueta ]]></b:skin> es:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
div.img{
  display:table;
}
div.img img{
 margin:0;
 padding:0;
}
div.img span{
 line-height:normal;
 font-size:11px;
 display:table-caption;
 margin:0;
 padding:0;
 background:#646464;
 color:white;
 font-style:italic;
 text-align:center;
 position:relative;
 height:0;
}
div.img span span{
 background:rgba(0, 0, 0, 0.4);
 display:block;
 padding:3px;
 text-shadow:0 0 15px white;
}

saludos :)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar