¿Como poner texto sobre una imagen usando CSS?

Question

Necesito que mis imagenes tengan un texto arriba con la descripción de cada una de ellas! Intenté tocar las positions del CSS y me anda bien con 3 de las 4, en la cuarta imagen se me descuajeringa todo, no sé porque :(

HTML:

<div class="helados container">
    <div class="row">
        <div class="col s12 l4">
            <img th:src="@{/images/chocolate.png}" />
            <a href="#"></a>
        </div>
        <div class="col s12 l4">
            <img th:src="@{/images/crema.png}" />
            <a href="#"></a>
        </div>
        <div class="col s12 l4">
            <img th:src="@{/images/dulceDeLeche.png}" />
            <a href="#"></a>
        </div>
        <div class="col s12 l4">
            <img th:src="@{/images/frutales.png}" />
            <a href="#"></a>
        </div>
    </div>
</div>

CSS:

.helados {
        padding: 0 1.5rem;
    }
.helados img {
        width: 100%;
    }
  .container {
    width: 100%;
}

.helados.container {
    padding: 0;
}

.helados.container .col {
    padding: 0 0.75rem !important;
}

Lo que quiero hacer es que en cada una de las imagenes (sobre ellas) aparezca un simple texto que diga CHOCOLATE, FRUTALES, DULCE DE LECHE y CREMAS para que quede más lindo para el usuario.

Gracias totales :)

No, un texto cualquiera ... puede ser un , no hice la etiqueta — Nacho Zve De La Torre, Oct 19 '18 at 18:37
mira [aquí](https://es.stackoverflow.com/questions/81332/c%C3%B3mo-poner-texto-sobre-una-imagen-en-html) hacen la misma pregunta y obtiene la solución. — Fran Islas, Oct 19 '18 at 18:40
Juega con `position: relative` para las imágenes y `position: absolute` para el texto. Si tienes alguna duda de como funcionan puedes consultar la siguiente pregunta-auto respuesta que publiqué hace un tiempo [¿Cual es la diferencia entre position: relative, position: absolute y position: fixed?](https://es.stackoverflow.com/questions/37930/cual-es-la-diferencia-entre-position-relative-position-absolute-y-position/37931#37931) — Francisco Romero, Oct 19 '18 at 18:47

score 4 · Accepted Answer · answered Oct 19 '18 at 18:40

Te dejo un ejemplo que a mí me funcionó.

div, img {
  display: block;
  position: relative;  
  width: 300px;
}

div p {
  background-color: rgba(255,255,255,.8);
  display: block;
  position: absolute;
  bottom: -16px;
  left: 0;
  padding: 5px;
  width: 100%;
}

<div>
  <img src="https://i.imgur.com/fXCarlD.jpg">
  <p>Texto</p>
</div>

Más información.

score 1 · Answer 2 · edited Jun 11 '20 at 10:54

Saludos Debes crear o tener tu imagen dentro de un contenedor en este caso un div,adicional la descripcion puede ir dentro de un span, tag personal, div..etc...en este caso uso un span:

<div class='img'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Ice_Cream_dessert_02.jpg/220px-Ice_Cream_dessert_02.jpg'/>
<span>Copa de Chocolate</span>
</div>

Para aplicar los estilos uso este codigo css:

<style>
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;
}
div.centro{
  margin:0 auto;
}
div.izq{
  float:left;
}
div.der{
  float:right;
}
</style>

Resultado:

Espero te sirva de guia...!!

nota la clase centro, izq, y der permite alinear las imagenes..em la posicion deseada — Diego Avila, Oct 19 '18 at 18:53

¿Como poner texto sobre una imagen usando CSS?

2 Answers2