CSS und Hover

[Matthias Scharwies]

Servus!

Liebes Forum,

Herzlich willkommen bei SELFHTML!

unter www.3dsg.de/test habe ich eine Seite angelegt, die mit mouseover effect verschiedene Boxen vergrößert. Unter der mittleren Box steht jetzt ein text "fff".

Wie schaffe ich es, dass dieser Text nicht sichtbar ist, sondern erst erscheint während ich mit dem Curosr über der grünen box bin?

Exkurs: Super, dass du mit grid und figure arbeitest. ich würde anstelle des span ein figcaption-Element verwenden.

Ich schaffe es zwar, es zu zu programmieren, dass Box und Text einen eigenen mouseover haben, aber ich bekomme es nicht so hin, wie oben gewünscht.

Im Titel hast Du schon von :hover`` gesprochen; mouseover verwendet man als Begriff eher, wenn man mittles JavaScript prüft, ob sich die Maus über dem Element befindet.

Im Tutorial CSS/Tutorials/Bilder_mit_Bildunterschriften wird so etwas gezeigt.

vllt kann ir jmd einen strukturellen Vorschalg machen?

Das figure-Element erhält eine bestimmte Größe und relative Positionierung; das figcaption-Element wird absolut im figure-Element positioniert.

Die figcaption ist durchsichtig und erhält erst, wenn die Maus über dem figure hovert eine volle Deckkraft (=nicht durchsichtig).

figcaption {
  opacity: 0;
  bottom: -3em;
  transition: all 1s ease;
}

figure:hover figcaption {
  opacity: 1;
  bottom: 0;
}

Herzliche Grüße

Matthias Scharwies