Bildunterschrift/vergrößern nur mit HTML?

Hallo,

gibt es eine einfache Methode, auf einer Homepage nur mit HTML/CSS (ohne Scripte) ein Bild einzubinden, dass sich beim Draufklicken vergrößert und eine Bildunterschrift eingeblendet wird? Ich hatte schon bisschen herumprobiert, aber so richtig toll sah es bisher nicht aus.

Gruß

Answer 1

[Babelfish]

Ja, das geht mit der Pseudoklasse :focus-within auch ohne JavaScript.

HTML

<div class="images">
  <div class="image-container" tabindex="-1">
    <img src="https://placehold.co/600x400/orange/white" alt="">
    <span>Bildunterschrift</span>
  </div>
  <div class="image-container" tabindex="-1">
    <img src="https://placehold.co/600x400/teal/white" alt="">
    <span>Bildunterschrift</span>
  </div>
  <div class="image-container" tabindex="-1">
    <img src="https://placehold.co/600x400/coral/white" alt="">
    <span>Bildunterschrift</span>
  </div>
</div>

CSS

.images {
  display: flex;
  gap: 10px;
  margin: 20px;
}

.image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.image-container img {
  width: 250px;
  height: auto;
  transition: transform 0.25s;
}

.image-container span {
  opacity: 0;
  color: white;
  transition: opacity 0.5s;
  z-index: 1;
}

.image-container:focus-within img {
  transform: scale(1.25);
}

.image-container:focus-within span {
  opacity: 1;
}

Ergebnis

Live

https://jsfiddle.net/Babelfisch/gkp3js60/21/

Woher ich das weiß: Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Answer 2

[Uneternal]

Es gibt eine Menge CSS Galerien, die du dir gratis runterladen kannst. Einfach sowas einbinden.

Free Gallery Website Templates (69) | Free CSS