CSS-Bildergalerie

Einrichten der HTML-Struktur

Um eine Bildergalerie zu erstellen, beginnen Sie mit dem Aufbau der HTML-Struktur. Erstellen Sie zuerst ein Container-<div>-Element, das alle Bilder der Galerie enthält. Dieser Container dient als Wrapper und ermöglicht es Ihnen, Stile auf die Galerie anzuwenden.

Fügen Sie innerhalb des Container-<div> einzelne <img>-Elemente für jedes Bild ein, das Sie in die Galerie aufnehmen möchten. Geben Sie für jedes Bild das src-Attribut an, das auf seinen Speicherort verweist. Sie können auch alt-Text hinzufügen, um jedes Bild für die Barrierefreiheit zu beschreiben.

Um die spätere Gestaltung und Bearbeitung zu erleichtern, weisen Sie sowohl dem Container-<div> als auch den einzelnen <img>-Elementen Klassennamen oder IDs zu. Geben Sie dem Container beispielsweise einen Klassennamen wie "gallery-container" und jedem Bild einen Klassennamen wie "gallery-image". Diese Klassennamen ermöglichen es Ihnen, bestimmte Elemente mit CSS-Selektoren anzusprechen.

<div class="gallery-container">
  <img src="image1.jpg" alt="Bild 1" class="gallery-image">
  <img src="image2.jpg" alt="Bild 2" class="gallery-image">
  <img src="image3.jpg" alt="Bild 3" class="gallery-image">
  <!-- Fügen Sie nach Bedarf weitere Bildelemente hinzu -->
</div>

Durch den Aufbau dieser HTML-Grundlage schaffen Sie die Voraussetzungen für die Gestaltung mit CSS. Das Container-<div> fungiert als übergeordnetes Element, das einzelne Bilder umschließt, während Klassennamen Ansatzpunkte für gezielte Gestaltung bieten. Mit dieser Struktur können Sie zur Gestaltung des Galerie-Containers und der Bilder übergehen.

Styling des Galerie-Containers

Nachdem Sie die HTML-Struktur erstellt haben, besteht der nächste Schritt darin, den Galerie-Container zu gestalten. Der Galerie-Container ist das <div>-Element, das alle Bilder enthält. Durch die Gestaltung des Containers können Sie sein Erscheinungsbild und Layout steuern.

Um die Breite und Höhe des Containers festzulegen, verwenden Sie die Eigenschaften width und height in CSS. Sie können Werte in Pixeln, Prozenten oder anderen gültigen Einheiten angeben. Sie können beispielsweise eine feste Breite von 800 Pixeln und eine Höhe festlegen, die sich an den Inhalten im Container anpasst.

.gallery-container {
  width: 800px;
  height: auto;
}

Um das Aussehen zu verbessern, können Sie eine Hintergrundfarbe anwenden oder einen Rahmen hinzufügen. Verwenden Sie background-color, um eine einfarbige Fläche zu erstellen, oder background-image, um ein Bild als Hintergrund zu verwenden. Das Hinzufügen eines Rahmens hilft, die Grenzen zu definieren und sorgt für eine visuelle Trennung von anderen Elementen auf der Seite. Verwenden Sie border, um die Rahmenbreite, den Stil und die Farbe festzulegen.

.gallery-container {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}

Um den Container horizontal auf der Seite zu zentrieren, verwenden Sie margin mit den Werten 0 auto. Dies setzt die oberen und unteren Ränder auf 0 und die linken und rechten Ränder auf auto.

.gallery-container {
  margin: 0 auto;
}

Durch die Kombination dieser Stile können Sie einen ansprechenden, zentrierten Galerie-Container erstellen. Passen Sie die Werte entsprechend Ihren Designvorlieben für Ihre Bildergalerie an.

.gallery-container {
  width: 800px;
  height: auto;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  margin: 0 auto;
}

Mit diesem gestalteten Container können Sie nun zur Gestaltung der einzelnen Bilder übergehen, um eine zusammenhängende Bildergalerie zu erstellen.

Gestaltung der Bilder

Nach der Gestaltung des Galerie-Containers ist der nächste Schritt die Gestaltung der Bilder in der Galerie. Einheitliche Größen, Rahmen und visuelle Effekte können das Erscheinungsbild Ihrer Bildergalerie verbessern.

Um ein einheitliches Aussehen zu erzielen, legen Sie eine konsistente Breite und Höhe für alle Bilder mit den CSS-Eigenschaften width und height fest. Sie können feste Pixelwerte oder Prozentangaben verwenden, um die Bilder responsiv zu machen. Eine Breite von 100% lässt jedes Bild seinen Container ausfüllen und behält dabei das Seitenverhältnis bei.

.gallery-image {
  width: 100%;
  height: auto;
}

Um die visuelle Attraktivität zu erhöhen, können Sie Rahmen oder abgerundete Ecken auf die Bilder anwenden. Verwenden Sie die border-Eigenschaft, um Rahmenbreite, -stil und -farbe festzulegen. Mit der border-radius-Eigenschaft können Sie die Ecken der Bilder abrunden.

.gallery-image {
  border: 2px solid #fff;
  border-radius: 5px;
}

Um Tiefe und Trennung zwischen den Bildern zu erzeugen, ziehen Sie die Anwendung eines Schattens in Betracht. Mit der box-shadow-Eigenschaft können Sie Schatten um Bilder herum hinzufügen. Sie können horizontale und vertikale Versätze, Unschärferadius, Ausbreitungsradius und Farbe des Schattens steuern.

.gallery-image {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

Durch die Kombination dieser Stile mit Ihren Designvorlieben können Sie visuell ansprechende Ergebnisse für Ihre Galerie erzielen.

.gallery-image {
    width:100%;
    height:auto;
    border:2px solid #fff;
    border-radius:5px;
    box-shadow:0 2px 4px rgba(0, 0, 0, .2);
}

Mit gestalteten Bildern können Sie nun fortfahren, diese in einem Rasterlayout anzuordnen, um eine strukturierte und organisierte Bildergalerie zu erstellen.

Erstellen eines Rasterlayouts

Um die Bilder strukturiert anzuordnen, können Sie CSS Grid oder Flexbox verwenden, um ein Rasterlayout für Ihre Bildergalerie zu erstellen. Diese Layout-Techniken ermöglichen es Ihnen, die Anzahl der Spalten und Zeilen zu definieren sowie den Abstand zwischen den Bildern festzulegen.

CSS Grid ist ein Layoutsystem, mit dem Sie zweidimensionale Raster erstellen können. Mit CSS Grid können Sie die Anzahl der Spalten und Zeilen mithilfe der Eigenschaften grid-template-columns und grid-template-rows definieren.

.gallery-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Die Syntax repeat(3, 1fr) erstellt drei Spalten, jede mit einer Breite von 1fr, was bedeutet, dass sie den verfügbaren Platz gleichmäßig aufteilen.

Wenn Sie Flexbox für Ihr Rasterlayout bevorzugen, können Sie ähnliche Ergebnisse erzielen. Flexbox ist ein eindimensionales Layoutsystem, das flexible und responsive Designs ermöglicht. Um ein Raster mit Flexbox zu erstellen, verwenden Sie die Eigenschaft display: flex für den Container und setzen Sie die Eigenschaft flex-wrap auf wrap. Dann steuern Sie die Breite jedes Bildes mit der Eigenschaft flex-basis.

.gallery-container {
  display: flex;
  flex-wrap: wrap;
}

.gallery-image {
  flex-basis: 33.33%;
}

In diesem Beispiel setzt flex-basis: 33.33% die Breite jedes Bildes auf ein Drittel der Containerbreite.

Um Abstände zwischen den Bildern in Ihrem Raster hinzuzufügen, verwenden Sie entweder die gap-Eigenschaft von CSS Grid oder die margin-Eigenschaft von Flexbox. Die gap-Eigenschaft legt Abstände zwischen Zeilen und Spalten fest, während die Verwendung von Flexbox's margin Abstände um jedes Bild herum hinzufügt.

.gallery-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

.gallery-image {
   flex-basis: 33.33%;
   margin: 5px;
}

Durch Anpassen der Werte von 'gap' oder 'margin' steuern Sie den Abstand zwischen den Bildern und erreichen das gewünschte Aussehen für Ihre Galerie. Die Erstellung eines Rasterlayouts mit CSS Grid oder Flexbox bietet eine strukturierte Möglichkeit, Ihre Bilder anzuordnen. Experimentieren Sie mit verschiedenen Spalten- und Zeilenkonfigurationen sowie Abstandsgrößen, um das Layout zu finden, das am besten zu Ihrem Bildergalerie-Design passt.

Responsive Design-Überlegungen

Bei der Erstellung einer Bildergalerie sollten Sie responsives Design berücksichtigen, um sicherzustellen, dass Ihre Galerie auf verschiedenen Bildschirmgrößen und Geräten gut aussieht und funktioniert. Responsives Design trägt dazu bei, Ihren Nutzern ein gutes Seherlebnis zu bieten, unabhängig vom verwendeten Gerät.

Um Ihre Bildergalerie responsiv zu gestalten, können Sie Media Queries in CSS verwenden. Mit Media Queries können Sie verschiedene Stile basierend auf der Bildschirmgröße oder den Geräteeigenschaften anwenden. Durch die Definition von Breakpoints bei bestimmten Breiten können Sie das Layout Ihrer Galerie anpassen, um es an verschiedene Bildschirmgrößen anzupassen.

/* Default styles for the gallery */
.gallery-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Media query for smaller screens */
@media screen and (max-width: 768px) {
  .gallery-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Media query for even smaller screens */
@media screen and (max-width: 480px) {
  .gallery-container {
    grid-template-columns: 1fr;
  }
}

Die Standardstile definieren ein Rasterlayout mit drei Spalten. Die erste Media Query zielt auf Bildschirme mit einer maximalen Breite von 768 Pixeln (typischerweise Tablets) ab und passt die Galerie auf zwei Spalten an. Die zweite Media Query zielt auf noch kleinere Bildschirme ab, wie etwa Mobiltelefone, und ändert das Layout auf eine einzige Spalte.

Sie können Ihre Breakpoints basierend auf dem Inhalt und Design Ihrer Galerie definieren. Es ist eine gute Praxis, Ihre Galerie auf verschiedenen Geräten und Bildschirmgrößen zu testen, um optimale Breakpoints für die Anzeige zu bestimmen.

Neben der Anpassung des Layouts müssen Sie möglicherweise auch die Bilder selbst anpassen, damit sie besser auf kleineren Bildschirmen passen. Um dies zu erreichen, setzen Sie die max-width-Eigenschaft von Bildern auf 100%, damit sie responsiv sind und proportional innerhalb ihrer Container skalieren.

.gallery-image {
  max-width: 100%;
  height: auto;
}

Durch das Setzen von max-width:100% werden Bilder proportional verkleinert, wenn ihr Container kleiner als ihre ursprüngliche Größe wird. Die Eigenschaft height:auto stellt sicher, dass das Seitenverhältnis während der Größenänderung beibehalten wird.

Denken Sie daran, Ihre Bildergalerie auf verschiedenen Geräten und Bildschirmgrößen zu testen, damit sie wie beabsichtigt gut aussieht. Responsives Design ist der Schlüssel, um ein gutes Nutzererlebnis zu bieten, indem sichergestellt wird, dass jeder leicht darauf zugreifen kann.

Hinzufügen von Hover-Effekten

Um Ihrer Bildergalerie Interaktivität zu verleihen, können Sie Hover-Effekte verwenden. Diese Effekte werden ausgelöst, wenn der Benutzer den Mauszeiger über ein Bild bewegt.

Ein häufiger Hover-Effekt ist die Änderung der Deckkraft des Bildes beim Überfahren. Durch die Verringerung der Deckkraft erzeugen Sie einen visuellen Hinweis, der anzeigt, dass das Bild interaktiv ist. Verwenden Sie die Pseudo-Klasse :hover in CSS und setzen Sie die opacity-Eigenschaft auf einen Wert zwischen 0 und 1.

.gallery-image:hover {
  opacity: 0.8;
}

Ein weiterer ansprechender Hover-Effekt ist das Anzeigen von Bildunterschriften beim Überfahren. Dies ermöglicht es Ihnen, zusätzliche Informationen zu jedem Bild bereitzustellen, wenn der Benutzer damit interagiert. Verwenden Sie die Pseudo-Klasse :hover zusammen mit den Pseudo-Elementen ::before oder ::after.

.gallery-image {
  position: relative;
}

.gallery-image::before {
  content: attr(alt);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-image:hover::before {
  opacity: 1;
}

Um diese Effekte sanft zu gestalten, verwenden Sie Übergänge. Übergänge steuern die Geschwindigkeit und den Zeitablauf von Änderungen. Verwenden Sie die transition-Eigenschaft, um den gewünschten Effekt festzulegen.

.gallery-image {
  transition: transform 0.3s ease;
}

.gallery-image:hover {
  transform: scale(1.05);
}

Experimentieren Sie mit verschiedenen Werten und Stilen, um die Kombination zu finden, die am besten zu Ihrem Design passt.

Implementierung der Lightbox-Funktionalität

Lightbox ist eine Technik, die in Bildergalerien verwendet wird, um eine größere Version eines Bildes anzuzeigen, wenn darauf geklickt wird. Sie ermöglicht es Benutzern, sich auf ein Bild zu konzentrieren, während der Rest der Seite abgedunkelt wird. Die Implementierung der Lightbox-Funktionalität erfordert CSS und JavaScript.

Wenn auf ein Bild geklickt wird, erscheint eine größere Version über der aktuellen Seite mit einem dunkleren Hintergrund. Dies schafft ein fokussiertes Seherlebnis für den Benutzer.

Um eine Lightbox mit CSS zu erstellen, beginnen Sie mit der Definition eines Container-Elements, das die größere Version des Bildes enthält. Dieser Container sollte anfangs versteckt und mit einem hohen z-index-Wert über anderen Inhalten positioniert sein. Wenden Sie eine halbtransparente Hintergrundfarbe an, um den Overlay-Effekt zu erzeugen.

<div id="lightbox-container">
  <img id="lightbox-image" src="" alt="">
  <span id="lightbox-close">&times;</span>
</div>

#lightbox-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  z-index: 9999;
}

#lightbox-image {
  display: block;
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

Um die Lightbox beim Klicken auf ein Bild auszulösen, verwenden Sie JavaScript. Fügen Sie jedem Bild in der Galerie einen Klick-Event-Listener hinzu. Wenn auf ein Bild geklickt wird, setzen Sie das src-Attribut des Lightbox-Bildes entsprechend und zeigen Sie es an.

const galleryImages = document.querySelectorAll('.gallery-image');
const lightBoxContainer = document.getElementById('lightbox-container');
const lightBoxImage = document.getElementById('lightbox-image');
const lightBoxClose = document.getElementById('lightbox-close');

galleryImages.forEach(image => {
  image.addEventListener('click', () => {   
    lightBoxImage.src = image.src;
    lightBoxContainer.style.display = 'block';
  });
});

lightBoxClose.addEventListener('click', () => {   
  lightBoxContainer.style.display = 'none';
});

Ein Klick auf ein Bild in der Galerie setzt das src-Attribut des Lightbox-Bildes entsprechend und zeigt es an. Ein Klick auf den Schließen-Button blendet den Lightbox-Container aus.

Denken Sie daran, die Elemente nach Ihren Designvorlieben zu gestalten, wie zum Beispiel die Anpassung der Größe, Positionierung, des Schließen-Buttons und die Anpassung der Overlay-Farbe.