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
    el 19 oct. 2018 a las 18:24
  • Perdón, ahí lo subí el 19 oct. 2018 a las 18:33
  • Que texto quieres ubicar arriba, el elemento <a> ?
    – Leonel
    el 19 oct. 2018 a las 18:34
  • No, un texto cualquiera ... puede ser un <span>, no hice la etiqueta el 19 oct. 2018 a las 18:37
  • 1
    mira aquí hacen la misma pregunta y obtiene la solución.
    – Fran Islas
    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 el 19 oct. 2018 a las 18:53
  • Gracias hermano, yo lo solucioné :) el 19 oct. 2018 a las 18:54

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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