Float box design + script fehler suche.


Sempervivum

Erfahrenes Mitglied
So, ich habe jetzt die Vierergruppen mit den Logos eingerichtet und den Hintergrund wieder transparent gemacht. Außerdem die vertikalen Abstände zwischen den Containern vergrößert.
Im schwarzen Kasten rechts neben dem Kontaktformular ist alles präzise zentriert. Wenn bei dir nicht, dass poste, welchen Browser Du benutzt.
Das mit dem Submitbutton mache ich später.
 

Sempervivum

Erfahrenes Mitglied
Dieses hatte ich vergessen und eben fiel mein Blick wieder darauf:
Ich möchte bei den logos beim rwiter team einen hover effect bei dem wen ich über ein logo fahre dises irgendwie durch eine kurtz info über dieses team ersetzt wird.
Mache ich dann auch bei Gelegenheit.
 

Andrin.Spitzer

Erfahrenes Mitglied
So, ich habe jetzt die Vierergruppen mit den Logos eingerichtet und den Hintergrund wieder transparent gemacht. Außerdem die vertikalen Abstände zwischen den Containern vergrößert.
Im schwarzen Kasten rechts neben dem Kontaktformular ist alles präzise zentriert. Wenn bei dir nicht, dass poste, welchen Browser Du benutzt.
Das mit dem Submitbutton mache ich später.
ich habe chrome. es ist schon auf horizontaler ebene ne aber nicht vertikal.
 

Sempervivum

Erfahrenes Mitglied
Verstehe. Das ist einfach, im CSS steht schon ein justify-content, aber leider auskommentiert, keine Ahnung warum. Wenn Du es aktivierst, wird es auch vertikal zentriert.
 

Sempervivum

Erfahrenes Mitglied
Hay kommt meiner vorstellung sehr nahe was sagst du zu diesem effect? ist das zu viel?
Würde nicht sagen, dass es zu viel ist. Ist gängig, dass man beim Hover Zusatzinfos anzeigt. Nur auf dem Smartphone muss man erst Mal drauf kommen, dass man drauf tippen kann und dann die Infos bekommt. Vielleicht einen Hinweis anbringen. Oder alternativ die Infos dauerhaft anzeigen.
 

Andrin.Spitzer

Erfahrenes Mitglied
Hay habe mir nen Hover effect gebastelt mit Hilfe von W3schools.
Ich möchte diese Funktion nutzen um eine Kurze Beschreibung der Teams darzustellen.

Jedoch endet es bei mir immer so.

Könnte das daran liegen das alle die selbe class haben und daher nicht richtig positioniert werden?
 

Andrin.Spitzer

Erfahrenes Mitglied
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?
 

Sempervivum

Erfahrenes Mitglied
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:

Sempervivum

Erfahrenes Mitglied
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.
 

Sempervivum

Erfahrenes Mitglied
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:

Neue Beiträge