Eigene CSS Bilder Galerie

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

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.


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


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