0

Estoy queriendo agregar una especie de pie de foto, dependiendo de si la foto contiene descripcion o no.

este seria un ejemplo:

introducir la descripción de la imagen aquí

Lo que se me ocurrio fue recurrir al caption y tratar de tocarlo con css para lograr mi objetivo

<div id="mi-carousel" class="carousel slide">        

          <!-- Contenedor de los Slide -->
        <div class="carousel-inner">

                @foreach($articulo->imagenes as $index => $imagen)          
                    <div class="item @if($index == 0) active @endif">
                        <img src="{{ asset('img/articulos/'.$imagen->nombre) }}" alt="" class="img-responsive">
                        @if($imagen->descripcion != "")
                            <div class="carousel-caption hidden-xs hidden-sd caption-articulo">
                                <h4>
                                    {{ $imagen->descripcion }}
                                </h4>   
                            </div>
                        @endif
                    </div>                 
                @endforeach
        </div>
        @if($articulo->imagenes->count() > 1)
          <!-- Controloles -->
          <a class="left carousel-control" href="#mi-carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Anterior</span>
          </a>
          <a class="right carousel-control" href="#mi-carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Siguiente hidden-xs hidden-sd</span>
          </a>
        @endif
    </div>

En el .css

.caption-articulo {
 top: auto;
 bottom: 0;
 background: #B984B3;;
}

Con esto logre ponerlo abajo, pero tengo una falencia importante en lo que a css y no se como hacer para lograr algo parecido a la imagen

4
  • No me queda claro cuál es el estado o posición actual del "pie de foto".
    – Shaz
    Commented el 1 nov. 2016 a las 17:21
  • @Shaz - donde está el puntero del ratón Commented el 1 nov. 2016 a las 17:42
  • @aldanux me perdí más. Me refería a cuál es el problema, o sea, si el resultado esperado es el de la imagen (donde está el puntero del ratón), ¿en dónde aparece el "pie de foto" actualmente?
    – Shaz
    Commented el 1 nov. 2016 a las 17:45
  • claro quiero que el resultado sea el "pie de foto" que señala el puntero del raton. No encuentro como hacer que el fondo se haga "transparente" o translucido, ni que ocupe toda la parte inferior, solo me colorea el contorno del texto.
    – Cidius
    Commented el 1 nov. 2016 a las 17:53

1 respuesta 1

0

Ver Demo

html:

<div id="image-box">
   <img src="http://placehold.it/300.png/09f/fff">

   <!-- Si tiene titulo agregar esto -->
   <p id="caption">Foto titulo</p>
 </div>

css

#image-box{
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
}


#caption {
  width: 100%;
  color: #fff;
  margin: 0;
  padding: 5px;
  background-color: rgba(0,0,0,.5); /* asignar el color y  transparencia */
  position: absolute;
  bottom: 0;
}

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.