Name: Volker Niederastroth
Author: Volker Niederastroth

HTML-Code

<section data-bs-version="5.1" class="freestyle-gallery mbr-section" group="Gallery" id="gallery-freestyle-06" style="background-color: {{bgColor}}; padding-top: calc({{paddingTop}} * 1rem); padding-bottom: calc({{paddingBottom}} * 1rem);">

  <!-- ⚙️ Mobirise Zahnrad-Parameter -->
  <mbr-parameters>
    <header>Layout</header>
    <input type="checkbox" title="Full Width" name="fullWidth">
    <input type="range" inline title="Padding Top" name="paddingTop" min="0" max="10" step="1" value="10">
    <input type="range" inline title="Padding Bottom" name="paddingBottom" min="0" max="10" step="1" value="4">

    <header>Hintergrund</header>
    <input type="color" title="Farbe" name="bgColor" value="#163300">

    <header>Bilder</header>
    <input type="range" title="Bildgröße (Zoom)" name="imgScale" min="80" max="120" step="1" value="88">

    <header>Anzeige</header>
    <input type="checkbox" title="Titel anzeigen" name="showTitle" checked>
    <input type="checkbox" title="Untertitel anzeigen" name="showSubtitle" checked>
    <input type="checkbox" title="Bildtexte anzeigen" name="showCaptions" checked>
  </mbr-parameters>

  <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
    <!-- Titel -->
    <div class="row mb-4 text-center">
      <div class="col-12">
        <h2 class="mbr-section-title mbr-fonts-style display-5" mbr-if="showTitle">Meine Galerie</h2>

        <p class="mbr-section-subtitle mbr-fonts-style display-7 mb-0" mbr-if="showSubtitle">
          Steuere die Bildgröße über das Zahnrad-Menü.
        </p>
      </div>
    </div>

    <!-- Galerie -->
    <div class="row g-3 justify-content-center">
      <!-- Item -->
      <div class="item features-image col-12 col-md-6 col-lg-4 active">
        <div class="item-wrapper">
          <div class="item-img" style="transform: scale({{imgScale}}%);">
            <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-12_172124/assets/images/mbr-600x423.jpg" alt="Bild 2" data-slide-to="0" data-bs-slide-to="0">
          </div>
          <div class="item-content" mbr-if="showCaptions">
            <h5 class="mbr-section-subtitle mbr-fonts-style mb-2 display-7">Bildtitel 2</h5>
            <p class="mbr-text mbr-fonts-style display-7">Beliebiger Text oder Beschreibung hier.</p>
          </div>
        </div>
      </div><div class="item features-image col-12 col-md-6 col-lg-4">
        <div class="item-wrapper">
          <div class="item-img" style="transform: scale({{imgScale}}%);">
            <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-12_172124/assets/images/mbr-600x423.jpg" alt="Bild 1" data-slide-to="1" data-bs-slide-to="1">
          </div>
          <div class="item-content" mbr-if="showCaptions">
            <h5 class="mbr-section-subtitle mbr-fonts-style mb-2 display-7">Bildtitel 1</h5>
            <p class="mbr-text mbr-fonts-style display-7">Beschreibung oder Text zu diesem Bild.</p>
          </div>
        </div>
      </div><div class="item features-image col-12 col-md-6 col-lg-4">
        <div class="item-wrapper text-only">
          <div class="item-content">
            <h5 class="mbr-section-subtitle mbr-fonts-style mb-2 display-7">Textkarte</h5>
            <p class="mbr-text mbr-fonts-style display-7">Hier steht der Text dsfdfsdfdf fdsfdsfsdfdfdsffdf d df&nbsp; df <br>&nbsp;dfdf df<br>&nbsp;df df df df d<br>&nbsp;d dfsd dffddfdfd fd <br>fd fd <br>dsdsd</p>
          </div>
        </div>
      </div>

      <!-- Item -->
      

      <!-- Textkarte -->
      
    </div>
  </div>
</section>

CSS-Code

.freestyle-gallery {
  transition: background-color 0.3s ease;
}
.freestyle-gallery .item-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.freestyle-gallery .item-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.freestyle-gallery .item-img {
  width: 100%;
  height: auto;
  transition: transform .3s ease;
}
.freestyle-gallery .item-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform .3s ease;
}
.freestyle-gallery .item-wrapper:hover .item-img img {
  transform: scale(1.05);
}
.freestyle-gallery .item-content {
  padding: 1rem 1.25rem 1.25rem;
}
.freestyle-gallery .text-only {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
  background: #f8f9fa;
}
@media (max-width: 767px) {
  .freestyle-gallery {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
P {
  text-align: center;
  color: #ffffff;
}
H5 {
  text-align: center;
  color: #9fe870;
}

Bild Block variabel

Bildtitel 2

Bild Block

Bildtitel 1

HTML-Code

CSS-Code

JavaScript-Code

Besucherstatistik