Mehrere Bildwechsel nebeneinander

Mimi · 3. Mai 2021

Hallo!

Ich möchte mehrere verschiedene Fotos nebeneinander Platzieren. Dabei soll bei jedem dieser Bilder, wenn man mit der Cursor drüber geht, ein jeweils anderes Foto gezeigt werden.

Mit <div class="bildwechsel"></div> funktioniert dieses jeweils für ein Foto, dass sich in ein anderes wechselt mit:

.bildwechsel {width:555px; height:401px; background:url("Bild.png");}

.bildwechsel:hover {background:url("Bild2.png");}

Nun möchte ich mehrere nebeneinandergereihte Bildwechsel. Also wo mehrere nebeneinandergereihte Bilder jeweils wechseln, wenn man mit dem Cursor drüber geht.

Ist das mit der oben genannten Methode möglich?

basti1012 · 3. Mai 2021

Das sollte gehen , warum auch nicht.

Hast du es schon ausprobiert.?

Du solltest dir auch Flexbox anschauen , dann ist nebeneinander reihen der Bilder einfacher

Lupus_III · 4. Mai 2021

Ich habe den Bildwechsel in meiner Webseite so gelöst,

dann muss man für einen weiteren Bildwechsel keine neue Klasse vergeben:

Code

HTML
<div class="container">
                  <img src="images/erich.JPG" alt="Erich" class="image">
                  <figcaption>Erich Wolf</figcaption> 
                  <div class="overlay">
                    <div><img src="images/erich2.JPG" alt="Erich" class="image"></div>
                    <figcaption>Erich Wolf</figcaption> 
                  </div>
  </div>

CSS
/* ################################################################ */
/* Fade in Overlay IMG */
/* ################################################################ */
 
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

Alles anzeigen

Mehrere Bildwechsel nebeneinander

Jetzt mitmachen!

Teilen

Tags