Hover Effekt 1903

  • Hallo Marion, hallo zusammen, ich habe den Hover Effekt 1903 nun verwendet. Fast zu 100 % zufrieden :D .


    Gibt es die Möglichkeit dem Effekt bzw. Button eine Rahmenoption hinzuzufügen? (Ich habe eine Skizze angefügt)



    Grüße und ein schönes Wochenende ;)


    Ela

    • Offizieller Beitrag

    Spontan fallen mir da 2 Möglichkeiten ein.


    1. Möglichkeit

    - Öffne die Eigenschaften der Seite in welcher du das Widget platziert hast.

    - Gehe hier zu Attribute > Mobile Script und füge dort folgendes ein: <style>.wzp-1903 a {border:solid 5px red !important;}</style>

    - Nun sollte in jedem Widget Bild Hover 1903 welches auf dieser Seite eingefügt wird die Buttons einen roten Rahmen von 5 Pixeln erhaten.


    2. Möglichkeit

    - Öffne im Widget-Ordner wzp-bild-hover-1903 die Datei hover1903.css.

    - Hier findest du als vorletzten Eintrag die Klasse .wzp-1903 a. Erweitere diese als letzten Eintrag um border:solid 5px red !important;.

    - Das ganze sollte dann so aussehen:

    - Nun sollte immer wenn das Widget "Bild Hover 1903" eingefügt wird dessen Buttons einen roten Rahmen von 5 Pixeln erhaten.

  • Hallo Mario,


    spontan ist gut. ^^ Ich habe es nun so, dass wenn ich deine Effekt Hover1903 nutze immer um den Button einen Rand in Weiß mit 3 px.



    VIELEN <3 Dank und ein schönes Wochenende

  • Hallo Mario,


    ich habe nun doch noch ein Problem ...

    Für den Nutzer ist es nicht klar, dass bei man ein Bild mit Hover 1903 Effekt anklicken kann und zum Button weiter kommt.

    Gibt es eine Option, dass der Button "mehr dazu" direkt mit angezeigt wird???


    Ich habe mal eine Skizze gemacht....


    Oder gibt es schon ein Widget das ich nehmen könnte, durchgeschaut habe ich deine Widget eigentlich.


    Grüße und Dankeschön


    Ela

    • Offizieller Beitrag

    Gehe in den Widget-Ordner und mache eine Sicherung der Datei hover1903.css.


    Ändere folgendes in der hover1903.css.

    CSS-Klasse .wzp-1903:hover figcaption lösche den Eintrag bottom: -200px;, ändere opacity: 0; in opacity: 1;.

    CSS-Klasse .wzp-1903 p ändere bottom: -5%; in bottom: 60%;, ändere opacity: 0; in opacity: 1;.


    - Extras > Entwickler > Änderungen übernehmen

    - Im Widget Einstellungen Texte > Abstand Unten % den Wert 60 eintragen.


    Den Wert 60% kannst du natürlich in der CSS-Datei und der Widget-Einstellung anpassen.