Eigene CSS Bilder Galerie

Eigene Bilder Galerie ohne Lightbox mit den Bildern direkt side-by-side aneinander

Demo ohne Link Demo mit Link Demo mit Lightbox Bildgröße verändern
Enten
Libelle
Luchs
Frucht
Fliege
Spatzen
Diese Bilder habe ich in ein Verzeichnis "images" mit meinem FTP-Programm auf meinen Server kopiert und dann lediglich auf diese im "Code-Editor" absolut verlinkt:


<!-- Beginn eigene Galerie -->
<div class="column">
    <img src="http://www.mobirise-tutorials.com/images/Enten.jpg" alt="Enten" title="Enten" style="width:100%">
</div>
<div class="column">
    <img src="http://www.mobirise-tutorials.com/images/Libelle.jpg" alt="Libelle" title="Libelle" style="width:100%">
</div>
<div class="column">
    <img src="http://www.mobirise-tutorials.com/images/Luchs.jpg" alt="Luchs" title="Luchs" style="width:100%">
</div>
<div class="column">
    <img src="http://www.mobirise-tutorials.com/images/Frucht.jpg" alt="Frucht" title="Frucht" style="width:100%">
</div>
<div class="column">
    <img src="http://www.mobirise-tutorials.com/images/Fliege.jpg" alt="Fliege" title="Fliege" style="width:100%">
</div>
<div class="column">
    <img src="http://www.mobirise-tutorials.com/images/Spatzen.jpg" alt="Spatzen" title="Spatzen" style="width:100%">
</div>
<!-- Ende eigene Galerie -->  


Hier meine CSS als Beispiel, die ich in den Bereich "CSS Editor" vom "Code-Editor" kopiert habe:

.column {
  float: left;
  width: 33.33%;
  padding: 2px;
}
@media (max-width: 767px) {
  .column {
    width: 100%;
  }
}


Wenn Ihr die Bilder direkt aneinander stellen wollt, dann setzt das "padding" von 2 auf 0px oder vergrößert den Abstand nach Belieben.

Unten noch ein Screenshot von dem einfachen Textblock, den ich für den Einbau der Fotos verwendet habe. Ich habe also in diesem Textblock lediglich den Beispieltext von Mobirise mit dem Code für meine Bilder ersetzt. 
Code

Unten ein weiteres Beispiel mit Beschriftung und Link

Klicke auf ein Bild für den zugeordneten Link.
Gefunden auf: codepen

Weiteres Beispiel hier.

Enten Enten - klicke nach oben
Libelle Libelle - klicke nach oben
Luchs Luchs - klicke nach oben
Frucht Frucht - klicke nach oben
Fliege Fliege - klicke nach oben
Spatzen Spatzen - klicke zu Mobirise-Tutorials.com
Hier der etwas modifizierte Code für die Anzeige mit Beschriftung und Link:


<!-- Beginn eigene Galerie -->
<div class="column imagebox">
  <a href="#top">
    <img src="http://www.mobirise-tutorials.com/images/Enten.jpg" alt="Enten" title="Enten" style="width:100%">
    <span class="imagebox-desc">Enten - klicke nach oben</span>
  </a>
</div>
<div class="column imagebox">
  <a href="#top">
    <img src="http://www.mobirise-tutorials.com/images/Libelle.jpg" alt="Libelle" title="Libelle" style="width:100%">
    <span class="imagebox-desc">Libelle - klicke nach oben</span>
   </a>
</div>
<div class="column imagebox">
  <a href="#top">  
    <img src="http://www.mobirise-tutorials.com/images/Luchs.jpg" alt="Luchs" title="Luchs" style="width:100%">
    <span class="imagebox-desc">Luchs - klicke nach oben</span>
  </a>
</div>
<div class="column imagebox">
  <a href="#top">  
    <img src="http://www.mobirise-tutorials.com/images/Frucht.jpg" alt="Frucht" title="Frucht" style="width:100%">
    <span class="imagebox-desc">Frucht - klicke nach oben</span>
  </a>
</div>
<div class="column imagebox">
  <a href="#top">  
    <img src="http://www.mobirise-tutorials.com/images/Fliege.jpg" alt="Fliege" title="Fliege" style="width:100%">
    <span class="imagebox-desc">Fliege - klicke nach oben</span>
  </a>
</div>
<div class="column imagebox">
  <a href="http://www.mobirise-tutorials.com/" target="_blank">  
    <img src="http://www.mobirise-tutorials.com/images/Spatzen.jpg" alt="Spatzen" title="Spatzen" style="width:100%">
    <span class="imagebox-desc">Spatzen - klicke zu Mobirise-Tutorials.com</span>
  </a>
</div>
<!-- Ende eigene Galerie -->


Hier meine entsprechend angepasste CSS als Beispiel:

.column {
  float: left;
  width: 33.33%;
}
@media (max-width: 767px) {
  .column {
    width: 100%;
  }
}
.imagebox {
  background: black;
  padding: 5px;
  position: relative;
  text-align: center;
}
.imagebox img {
  opacity: 1;
  transition: 0.5s opacity;
  border-radius: 5px;
}
.imagebox .imagebox-desc {
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0px;
  color: white;
  font-size: 0.8em;
  left: 0px;
  padding: 10px 15px;
  position: absolute;
  transition: 0.5s padding;
  text-align: center;
  width: 100%;
}
.imagebox:hover img {
  opacity: 0.7;
}
.imagebox:hover .imagebox-desc {
  padding-bottom: 10%;
}

Unten eine Bildanzeige mit veränderbarer Größe

Ziehe mit der Maus unten rechts am Desktop an der Ecke und ändere die Größe des Bildes

Gefunden bei: Werner-Zenk.de

Original neu laden
Hier habe ich ein Formularfeld "textarea" mit der id="textarea" verwendet, das man in der Größe ändern kann.

<div class="d-flex justify-content-center">
    <textarea id="textarea" readonly="readonly"></textarea>
</div>

Als CSS nehme ich Bezug auf diese id="textarea" und füge sie in den Bereich "CSS Editor" des Blocks ein:

textarea#textarea {
  resize: both;
  max-width: 100%;
  min-width: 600px;
  height: 400px;
  min-height: 200px;
  background-image: url("https://www.mobirise-tutorials.com/BusinessM4/images/Enten1800.jpg");
  background-size: cover;
  background-position: center center;
  cursor: default;
}
@media (max-width: 767px) {
  textarea#textarea {
    min-width: 300px;
    min-height: 200px;
    height: 200px;
  }
}
Adresse

Schöne Strasse 1, Berlin

Deutschland

Links