Beiträge von Alpha_Leviathan

  • Hover Effect

    komisch, auf einmal hat es funktioniert, obwohl ich genau das bereits probiert hatte.
    Vielleicht ein Schreibfehler o.ä. Aber vielen Dank für deine Mühe, auch dass du das
    ganze immer in ein Beispiel geschrieben hast, das hat sehr geholfen :)

  • Hover Effect

    was meinst du denn mit Rahmenbedingungen?

    also derzeit sieht das html so aus:

    <a class="Uebergang" href="Hier ist der Link">
    <img src="http://veganvergleich24.de/wp-content/uploads/2018/03/Veganes-Gebäck.jpg" />
    <span>Hier steht der Text</span>
    </a>

    und das css so:

    .Uebergang {
    position: relative;
    display: inline-block;
    }

    .Uebergang img {
    width: 30vw;
    opacity: 1.0;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out ;
    -moz-transition: all 0.5s ease-in-out ;
    -ms-transition: all 0.5s ease-in-out ;
    -o-transition: all 0.5s ease-in-out ;
    }

    .Uebergang:hover img {
    opacity: 0.45;
    }

    .Uebergang span {
    font-size: 1.9vw;
    font-family: 'Quicksand', sans-serif;
    color: #444444;
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out ;
    -moz-transition: all 0.5s ease-in-out ;
    -ms-transition: all 0.5s ease-in-out ;
    -o-transition: all 0.5s ease-in-out ;
    }

    .Uebergang:hover span {
    opacity: 1;
    }

    Jedoch scheint in keiner der Klassifizierung "text-align: center;" zu funktionieren

  • Hover Effect

    Kleiner Nachtrag:

    Gibt es eine Möglichkeit das ganze zu zentrieren ohne eine weiteren Div-Container zu benutzen?
    Ich hatte es mit

    margin-left: auto;
    margin-right: auto;

    bei ".uebergang" und ".uebergang img" probiert, allerdings ohne Erfolg.

  • Hover Effect

    ok schonmal vielen Dank für deine Hilfe :)
    Die Klassennamen habe ich direkt umbenannt in "Ubergang"

    Das Div "Ubergang" habe ich auf width: 55%; gestellt, damit es so
    breit ist wie das img. Allerdings ist darauf hin das img etwas zusammengeschrumpft
    und der Text hing immer noch an der selben Stelle aus dem Bild.

    Hast du zufällig einen Lösungsvorschlag dafür? Der Text orientiert sich ja immer noch
    nicht an dem Bild.

  • Hover Effect

    Hallo liebe Community :)

    und zwar würde ich gerne auf einer Seite ein Bild einbinden mit einem Hover Effekt.
    Wenn man mit der Maus darüber geht, soll es blasser werden und ein Text in der Mitte erscheinen.
    Das ganze muss dann aber auch noch per klick auf eine weitere Seite führen.
    Ich habe den ganzen gestrigen Abend und den heutigen Morgen damit verbracht, bin mit meinem
    Latein jedoch einfach am Ende. HTML-Code wurde aus dem Wordpress-Editor und CSS Code
    aus Custom CSS rauskopiert.

    HTML-Code:

    <div class="Übergang">
    <a href="Hier ist der Link" >
    <img src="Das ist das Bild.jpg" />
    <div class="ÜbergangText">Hier steht der Text</div>
    </a>
    </div>

    CSS-Code:

    .Übergang {
    position: relative;
    }

    .Übergang img {
    width: 55%;
    height: auto;
    opacity: 1.0;
    transition: all 1s linear;
    -webkit-transition: all 1s linear ;
    -moz-transition: all 1s linear ;
    -ms-transition: all 1s linear ;
    -o-transition: all 1s linear ;
    }

    .Übergang img:hover {
    opacity: 0.6;
    }

    .ÜbergangText {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 4vw;
    opacity: 0;
    transition: all 1s linear;
    -webkit-transition: all 1s linear ;
    -moz-transition: all 1s linear ;
    -ms-transition: all 1s linear ;
    -o-transition: all 1s linear ;
    }

    .ÜbergangText:hover {
    opacity: 1;
    }

    Die Hover Effekte funktionieren sowohl bei dem Bild, als auch bei dem Text einwandfrei.
    Allerdings ist der Text überhaupt nicht wie gewünscht in der Mitte des Bildes, sondern
    ganz rechts und zur Hälfte außerhalb des Bildes. Warum?

    Wahlweise habe ich auch schon ein fertiges Hover-Bild mit Text, allerdings habe ich
    es nicht geschafft eine Transition von Bild zu Bild zu erzeugen. Sobald ich die Größe
    in % angegeben habe hat die Transition einfach nichtmehr funktioniert. Allerdings sollte
    die obere Variante sowieso verträglicher für die Ladegeschwindigkeit sein, da nur ein Bild
    geladen werden muss anstatt zwei.


    Über eure Hilfe würde ich mich sehr freuen!
    Liebe Grüße :)

  • Ansicht für mobile Geräte optimieren

    Ok das gröbste habe ich jetzt nach stundenlangen ausprobieren hinbekommen.

    Das einzige was ich noch ändern möchte ist dass das Parallax-Bild ein bisschen
    mitscrollt und nicht statisch bleibt.

    Außerdem hätte ich gerne den .menu-toggle button einmal mit anderen farben.
    Anstatt einem grauen Kasten mit 3 weißen Streifen hätte ich gerne einen weißen
    Kasten mit 3 grauen Streifen.

    Und zu guter Letzt wird der Footer ungewöhnlich dick wenn der Bildschirm schmal
    genug wird.

    Für irgendwelche Vorschläge wäre ich super dankbar :)

  • Ansicht für mobile Geräte optimieren

    Zitat von Alpha_Leviathan

    Erstmal vielen Dank für eure Hilfe.

    Was könnten denn mögliche Fehlerquellen sein? Die Maße des Bildes? bearbeitet habe ich das Parallax per Custom CSS nur mit

    #section-10.parallax-section.clearfix.action_template {
    border-width: 0px;
    height: 90vh;
    }

    um einen unschönen orangenen rand verschwinden zu lassen und damit sich das Bild über den ganzen Bildschirm erstreckt.

    Kleinigkeit zum hinzufügen: hier ist mal ein Screenshot von meinen Einstellungen für das Parallax Bild:
    [COLOR=#454545][FONT=&quot][size=10]http://www.bilder-upload.eu/show.php?file=…-1518697467.png

    Hier nochmal 2 Screenshots des Problems:
    [/SIZE][/FONT][/COLOR]
    [COLOR=#454545][FONT=&quot][size=10]http://www.bilder-upload.eu/show.php?file=…-1518697640.png[/SIZE][/FONT][/COLOR]
    [COLOR=#454545][FONT=&quot][size=10][/SIZE][/FONT][/COLOR]
    [COLOR=#454545][FONT=&quot][size=10]http://www.bilder-upload.eu/show.php?file=…-1518697679.png


    Dann würde ich gerne noch dieses kleine Viereck entfernen:[/SIZE][/FONT][/COLOR]
    [COLOR=#454545][FONT=&quot][size=10]http://www.bilder-upload.eu/show.php?file=…-1518697568.png


    und die orangene Farbe hiervon ändern:
    [/SIZE][/FONT][/COLOR]
    [COLOR=#454545][FONT=&quot]http://www.bilder-upload.eu/show.php?file=…-1518697748.png

    Danke schonmal im Voraus :)[/FONT][/COLOR]

  • Ansicht für mobile Geräte optimieren

    Erstmal vielen Dank für eure Hilfe.

    Was könnten denn mögliche Fehlerquellen sein? Die Maße des Bildes? bearbeitet habe ich das Parallax per Custom CSS nur mit

    #section-10.parallax-section.clearfix.action_template {
    border-width: 0px;
    height: 90vh;
    }

    um einen unschönen orangenen rand verschwinden zu lassen und damit sich das Bild über den ganzen Bildschirm erstreckt.

  • Ansicht für mobile Geräte optimieren

    Hallo Liebe Wordpress-Community,

    mit folgender Website bin ich eigentlich schon sehr zufrieden: patrick-peter.com
    Sobald die Website allerdings auf mobilen Geräten wie Tablets oder Handys angezeigt wird,
    beginnt das Chaos. Folgende unschöne Dinge sind mir aufgefallen:

    -Das Navigationsmenü im Header wird ersetzt durch einen Navigationsbutton der nicht richtig
    funktioniert. Lieber wäre mir, der Text wird abhängig von dem Display kleiner.

    -Das Parallax-Bild beginnt oben und unten von neu. Besser wäre es würde ganz normal angezeigt werden.

    -Der Text auf der gesamten Website und die MaxButtons skalieren nicht mit der Website

    -Der Footer wird dick und die Dinge stehen nicht nebeneinander.

    Die Hilfe die ich im AccessPress Parallax Forum bekam war: Buy pro and int edit the Stylesheet.

    Vielen Dank schonmal im Voraus :)