Frage figcaption - kein Zeilenumbruch

[Revilo]

Hallo,

ich habe zwei Bilder übereinandergelegt. Sobald die Maus über das vordere Bild geht (hover), wird auf das zweite Bild gewechselt. Der dem zugrundeliegende Code lautet wie folgt:

HTML:
<figure><a><img class="hover" src="http://www.tripaddicted.de/wp-content/uploads/2017/08/panama15_begradigen3_nachher.jpg" alt="Bildbearbeitung - Ohne und mit Korrektur zum Horizont" /><img class="nohover" src="http://www.tripaddicted.de/wp-content/uploads/2017/08/panama15_begradigen3_vorher.jpg" alt="Bildbearbeitung - Ohne und mit Korrektur zum Horizont" /></a><figcaption>Panama San Blas Chichime - Ohne und mit Korrektur zum Horizont</figcaption></figure>

CSS:
img.nohover {
border:0;
}

img.hover {
border:0;
display:none;
}

a:hover img.hover {
display:inline;
}

a:hover img.nohover {
display:none;
}

figure {
max-width: 100%;
height: auto;
width: 600px;
margin: auto;
font-size:0.75rem;
color: #999;
line-height: 0;
}

figcaption {
position: relative;
top: 18px;
}

Mein Problem ist die Beschriftung. Wird der Browser Bereich verkleinert bzw. bin ich im Handymodus bricht die Zeile mit der Beschriftung nicht in die Nächste um, sondern in der selben Zeilen, so dass der Text sich überlappt siehe Bild)

 

[Revilo]

Hi Sempervivum,

vielen Dank für Deine Hilfe. Ich habe das so umgesetzt wie von Dir beschrieben und es funktioniert. Leider haben sich dadurch zwei unschöne Nebeneffekte ergeben:

1. Die Beschriftung des Bildes ist zum einen plötzlich zu dicht am Bild herangerückt.
2. Wenn ich mit der Maus über das Bild gehe springt die Beschriftung plötzlich ein Stück nach unten.

Weißt Du wo das Problem liegt?

 

[Revilo]

ok, habs jetzt selbst herausgefunden:

img.nohover {
border:0;
display: initial; (oder eben inline)
}

 

[MrMurphy]

Hallo

Zu 2.: Die Bilder haben eine unterschiedliche Höhe.

Zudem gehört es zu den Grundlagen Bilder nur so groß (speziell breit) zu machen wie sie maximal auf der Webseite angezeigt werden sollen.

Zu 1.: Das kann ich nicht nachvollziehen. Hast du mehr geändert als nur das line-height zu löschen?

Für figure und img habe ich Grundeinstellungen, die sich grundsätzlich bewährt haben:

      figure {
         min-width: 1px;
         max-width: 100%;
         margin: 0rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0;
      }

Für deinen Effekt würde ich das folgende CSS zusätzlich verwenden:

      figure {
         max-width: 600px;
         margin: auto;
      }
      figure img.hover {
         display: none;
      }
      figure a:hover img.hover {
         display: block;
      }
      figure a:hover img.nohover {
         display: none;
      }
      figcaption {
         color: #999;
         font-size: 0.75rem;
         text-align: center;
      }

Wobei du dir überlegen solltest ob du Touchscreengeräte wie Smartphones und Tablets wirklich nicht berücksichtigen willst. Die kennen schließlich keine hover-Effekte.

Gruss

MrMurphy

 

[Revilo]

Hallo Murphy,
Hallo Sempervivum,

danke erstmal für die vielen Hinweise.

Alle oben genannten Probleme konnte ich mit dem Hinweis von Sempervivum und display: inline für img.nohover lösen.

@Murphy
Da ich die Bilder nicht nur im Beitrag, sondern auch in einer extra Galerie bereitstelle, sind sie größer als im Beitrag.

Danke für Deine Grundeinstellungen. Schaue ich mir auf jeden Fall an.

Bzgl. der Touchgeräte, so funktioniert der Hover Modus, wenn jemand auf das Bild klickt (switch zum zweiten Bild).