Caption selbst an Bild anbringen

Eine Beschriftung an einem Bild eines Blocks von Mobirise mittels CSS anbringen

Mobirise Block mit Caption versehen

Der Block unten wurde händisch mit einer Linie getrennt und dem Bild wurde eine 
mittels CSS animierte Beschriftung hinzugefügt.

Weiteres Beispiel hier.

Capt'n Jack - für einen gemütlichen Abend

Neu Eingetroffen

Übersee-Rum für den einzigartigen Genuss


Die Trennlinie zwischen den beiden Sektionen oben, wurde mittels einer "border" (Rand) an der
class="image-element" in den Bereich "CSS Editor" vom "Code Editor" eingefügt.

Mit der @Media-Anweisung wird diese Linie am kleinen Display wieder entfernt und anstelle dessen eine horizontale Trennlinie gesetzt, da dann die Sektionen untereinander dargestellt werden:

.row-element,.image-element {
  padding: 0;
  border-right: 2px solid #e1844b;
  @media (max-width: 767px) {
    border-right: none;
    border-bottom: 1px solid #e1844b;
  }
}


Die Beschriftung (Caption) vom Bild habe ich mit der CSS unten erstellt und diese CSS-Klassen den Selektoren hinzugefügt. Bei der CSS (unten) habe ich noch die Breite der Bilderbox berechnet. Hierfür habe ich von den 100% die Breite der Trennlinie (2px) wieder abgezogen.

<div class="img-wrap imagebox" style="width: 80%; height: 80%;">
    <img src="assets/images/mbr-1516x1010.jpg" alt="" title="">
    <span class="imagebox-desc">Capt'n Jack - für einen gemütlichen Abend</span>
</div>

.imagebox {
  background: black;
  padding: 0px;
  position: relative;
  text-align: center;
}
.imagebox img {
  opacity: 1;
  transition: 0.5s opacity;
}
.imagebox .imagebox-desc {
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0px;
  color: white;
  font-size: 1.0em;
  left: 0px;
  padding: 10px 15px;
  position: absolute;
  transition: 0.5s padding;
  text-align: center;
  width: calc(~"100% - 2px");
}
.imagebox:hover img {
  opacity: 0.7;
}
.imagebox:hover .imagebox-desc {
  padding-bottom: 10%;
}

HTML
Adresse

Schöne Strasse 1, Berlin

Deutschland