1

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;
}

introducir la descripción de la imagen aquí

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 :)

7
  • Añade el codigo css.
    – Leonel
    Commented el 19 oct. 2018 a las 18:24
  • Perdón, ahí lo subí Commented el 19 oct. 2018 a las 18:33
  • Que texto quieres ubicar arriba, el elemento <a> ?
    – Leonel
    Commented el 19 oct. 2018 a las 18:34
  • No, un texto cualquiera ... puede ser un <span>, no hice la etiqueta Commented el 19 oct. 2018 a las 18:37
  • 1
    mira aquí hacen la misma pregunta y obtiene la solución.
    – Fran Islas
    Commented el 19 oct. 2018 a las 18:40

2 respuestas 2

4

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.

1

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:

Resultado

Espero te sirva de guia...!!

2
  • 1
    nota la clase centro, izq, y der permite alinear las imagenes..em la posicion deseada Commented el 19 oct. 2018 a las 18:53
  • Gracias hermano, yo lo solucioné :) Commented el 19 oct. 2018 a las 18:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.