Wie kann man Untertitel bei einem Bootstrap Slider über das ganze Bild gehen lassen?

Hallo,

Da der Slider erst einmal den wichtigsten Satz zeigen soll, der eigentliche Text aber viel länger ist, würde ich gerne die Untertitel meines Bootstrap Sliders beim hovern über das ganze Bild gehen lassen...

--> Hinter den Untertiteln liegt ein roter, halbtransparenter, Balken und dieser sollte sich beim hovern über das ganze Bild ziehen und der ganze Text soll erscheinen.

hier der html-code:

 <div class="carousel-item active"> <img src="img_beispiel" class="d-block w-100" alt="Beispielbild">

     <div class="carousel-caption d-none d-md-block">

      <h5>Dies ist ein Beispielbild</h5>

      <button type="button" class="btn btn-link">Mehr lesen</button>

     </div>

    </div>

-->den Button "mehr lesen" bräuchte ich dann nicht (außer ihr habt eine Idee wie man dies umsetzt)

--> den Balken habe ich in einem Bildbearbeitungsprogramm eingefügt, vielleicht weiß jemand ja auch noch wie ich den in html und css in den Slider einbauen kann :D

so sieht die css Datei jetzt noch aus:

.carousel-caption{

font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

}

mehr habe ich da bis jetzt noch nicht drin stehen.

Da ich mich noch nicht so gut mit html, css und Bootstrap auskenne, bin ich für jede Hilfe dankbar :)

Vielen Dank schonmal im Vorraus!

Answer 1

[regex9]

Die Bootstrap CSS-Regel für die Klasse carousel-caption sieht so aus.

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

Die Box, welche den Text beinhaltet, wird also absolut zu dem Bildcontainer positioniert und zusätzlich hat sie einen vertikalen Innenabstand (padding) von 20px.

Du kannst innerhalb deiner CSS-Regel die jeweiligen Properties überschreiben. Achte dabei darauf, dass deine Styles erst nach denen von Bootstrap im HTML-Dokument eingebunden werden.

Die Position sowie die Größe kannst du mit den CSS-Properties bottom, left, right und top steuern. Wenn du left und right auf 0 setzt, kann der Text die volle horizontale Breite nutzen, statt nur 70%. Mit top: 0 würde er nach oben rutschen, mit bottom: 0 wäre die restliche Fläche nach unten hin ausgefüllt (sofern auch der Innenabstand herausgenommen wurde).

(...) den Balken (...)

Einen Balken könnte man mit einer Rahmenlinie umsetzen. Um den Balken unabhängig vom Text zu halten, wäre ein Pseudoelement gut.

Beispiel:

.carousel-caption::after {
  border: 2px solid red;
  content: '';
  display: block;
  opacity: 0;
}

.carousel-caption:hover::after {
  opacity: 0.5;
}