Bildunterschriften

[Rolf B]

Hallo Roland,

viel hilft viel - hier nicht. Du justierst so viel herum, dass am Ende alles durcheinander ist.

Meine Empfehlung:

• kein Tabellenlayout, sondern eine Liste (<ul>) mit display: flex und Umbruch (flex-wrap). Die Listenpunkte und Einrückungen kann man entfernen.

• Kein JavaScript für den Zoom, sondern transform:scale und transition:transform um das zu animieren.

• Keine a Elemente zum Hervorheben, sondern Buttons. a sind LINKS, also etwas das nach extern soll. Buttons dienen als Aktion auf der Seite. Mit type="button" submitten sie auch keine Forms.

Ich habe da mal ein Fiddle vorbereitet.

Im Wesentlichen steht da dieses HTML Gerüst:

<ul class="gallery">
  <li>
    <figure>
      <button type="button">
        <img src="...">
      </button>
      <figcaption>Flügelauto</figcaption>
    </figure>
  </li>
  <li>...</li>
</ul>

und folgendes Styling

Listenpunkte und Listeneinrückungen entfernen. Flex-Layout mit Umbruch einschalten:

.gallery {
  list-style-type: none;
  padding: 0;
  display: flex; 
  flex-flow: row wrap;
}

Button nicht wie einen Button aussehen lassen. Aber ein kleines Padding, damit man den Markierungsrahmen sieht falls der Browser das transform nicht unterstützt (muss dann schon sehr alt sein, ab IE10 okay).

.gallery button {
  background-color: transparent;
  border: none;
  padding: 0.2em; margin: 0;
}

Für das img Element festlegen, dass transforms mit 1s Übergang auszuführen sind. Und die Höhe auf 10em festlegen, damit die Bilder mit der Schriftgröße skalieren.

Wenn der Button um das img den Fokus hat, das Bild vergrößern und etwas nach unten schieben.

.gallery img {
  transition: transform ease-in-out 1s;
  height: 10em;
}

.gallery button:focus img {
  transform: scale(1.4) translateY(0.5em);
}

Fertig. Kein JavaScript, kein Zurechtschieben mit Margins. Im Fiddle sieht Du es mit ein paar Bildern mehr.

Rolf