Home / Questions / 31096
Accepted
Cidius
Asked: 2020-11-02 08:27:24 +0800 CST 2020-11-02 08:27:24 +0800 CST

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

  • 772

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

this would be an example:

enter image description here

What I came up with was to use the 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 an important flaw in what to css and I don't know how to do to achieve something similar to the image

css

1 Answers

  1. Best Answer

    See Demos

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