[phpBB2] Wer ist online als gehoverte Bilder, übergang fließend?

Hallo,

Ich hab in meinem Forum die 'Wer ist online' Anzeige so "umgebaut" dass sie aus zwei Bildern besteht, die wenn man mit der Maus darüber fährt verschwinden und darunter wird dann der Text angezeigt von 'x Mitglieder, y Beiträge etc.'

Allerdings verschwind die Bilder sehr 'plötzlich' und ich würde da einen fließenden übergang schon bevorzugen, zumal es auch besser aussieht. Da ich es schon nicht schaffe, dass die Bilder zur Seite 'gleiten' wollte ich das wenigstens so.
Ich hab dazu jetzt auch schon das Hilfe Forum durchforstet, aber irgendwie bezog sich das meiste das ich gefunden hab auf invision, da ich aber ein phpbb2 Forum hab funktioniert das da irgendwie nicht. jedenfalls tat es das nicht, als ich es ausprobiert habe.

Ich weiß nicht mehrer Fragen, aber das gehört irgendwie dazu:
Zwischen den beiden Bildern ist ein Abstand, da das Bild aber eigentlich 'zusammengefügt' gehört und von mir nur in zwei Teile zerlegt wurde sieht das ziemlich .. nun ziemlich doof aus.

Sollte ich bei der Suche etwas übersehen haben tut es mir Leid, ich hab versucht alle möglichen Suchbegriffe durchzugehen.

Danke schon mal.

Für das ein und Ausblenden solltest du mal nach dem CSS Befehl "Transform" im Netz suchen.
Das kannst du dann deinen CSS Codes die du eingesetzt hast, hinzufügen.
Das mit der Lücke zwischen den Bildern liegt daran, das dieser Bereich aus einer Tabelle mit mehreren Zeilen und Zellen besteht. Du musst im Template den Zellen und Zeilenabstand auf "0" setzen.

Also das die Bilder als eines angezeigt werden hat jetzt funktioniert, hätte ich ja auch mal selber drauf kommen können.

Aber das der Übergang fließend ist will einfach nicht.
Falls du zeit hast da mal kurz drüber zu schauen:
So sieht das im CSS aus, hat sich da irgendwo ein Fehlerteufel eingeschlichen oder stimmt der ganze Befehl nicht?:

Code:

#hovertext span {
        display: none;
        min-height: 230px;
        max-width: 410px;
      transition: 3s !important;
  -moz-transition: 3s !important;
  -o-transition: 3s !important;
  -htm-transition: 3s !important;
  -webkit-transition: 3s !important;
    }
    #hovertext:hover span {
        display: block;
    }
    #hovertext img {
        display: block;
    }
    #hovertext:hover img {
        display: none;
    }

Dazu müsste ich mir den ganzen Bereich selber mal ansehen.
So wie es aussieht, hast du ja auch eine Template Änderung vorgenommen.
Grundsätzlich ist das schon der richtige Weg. Du musst aber noch angeben, was bei der Transformation passieren soll (z.B. Opacity für eine Transparenz des Bildes).
Schau dir auch mal die Verbindung dieser beiden Befehle an.
Ansonsten müsste ich mir das morgen mal am Rechner ansehen.
Aber ich denke, das du es mit dem Hinweis auch selber hinbekommst.

Ja ich glaub damit bekomm ichs hin.
Danke für die Hilfe.

Nur noch als weitere Hilfe:
Hier ist die Eigenschaft Display für das Bild nicht so angebracht.
Auch der Text kann mit Opacity zumindest "Unsichtbar" gemacht werden, obwohl er dann noch da ist.