Float box design + script fehler suche.

Wen du es dir ansiehst kannst du mal schauen warum der h4 und h5 tag bei kleinem fenster nicht das machen was alle andern h tags machen?
 
Bei mir funktioniert der Hover-Effekt. Er hat nur einen kleinen Schönheitsfehler: Gerät man mit der Maus in den Zwischenraum zwischen den beiden Textzeilen, klappt das Ding wieder zurück. Ist das das Problem, das Du meinst?
 
Zuletzt bearbeitet:
Oder meinst Du das Verhalten im Android-Browser: Bei mir wird die Rückseite mit der Schrift nicht sichtbar, sondern nur die Vorderseite umgeklappt. Wenn ich mich richtig erinnere, konnte man das mit backface-visibility beheben, musst Du mal nachforschen und probieren.
 
Der HTML-Inspektor hat mir die Erklärung für den Nebeneffekt beim Hover gezeigt:
Das div.flip-box und div.flip-box-inner hat jeweils eine Höhe von 0. Der Grund ist, dass die Elemente darin absolut positioniert sind. Lösung, indem man nur die Rückseite absolut positioniert:
Code: 
        .flip-box-back {
            background-color: #262626;
            color: white;
            transform: rotateY(180deg);
            position: absolute;
            top: 0;
            left: 0;
        }
        .flip-box-front,
        .flip-box-back {
            /* position: absolute; */
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück