How to modify the caption of a carousel so that the text is seen as a footnote

Question

How to modify the caption of a carousel so that the text is seen as a footnote

Navigation

#1 by (1 votes)

1

I'm wanting to add a kind of caption, depending on whether the photo contains description or not.

this would be an example:

What occurred to me was to resort to caption and try to touch it with css to achieve my goal

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

In the .css

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

With this I managed to put it down, but I have a major flaw in css and I do not know how to achieve something similar to the image

css bootstrap-carousel

asked by Cidius 01.11.2016 в 17:27

source

1 answer

Convert .odt to plain text in C # [closed] Google maps mark with points from the database

score 1 · Accepted Answer

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