Text im Bild mit einem Rahmen umgeben, bei Mauskontakt wird das anders angezeigt

    Guten Abend


    Es sind immer wider Seiten zu sehen, wo in einem Bild ein Wort steht.


    Zum Beispiel auf der Startseite steht im Bild das wort "Kontakt". Das ganze ist mit einem weißen Rahmen umgeben, damit es besser zur Geltung kommt.


    Wenn dann mit der Maus berührt wird kommt eine weisse Füllung, und das zuerst schwarz geschriebene Wort wird weiß.- Mausover.


    Wie kann ich das mit der V13 erledigen? Bin Anfönger.


    Im Answers habe ich das s gesehen bei einem Templat von einer Pizzeria.


    Ist das schwer nachbauen?


    Anton

    Möglicherweise mit dem Animated Button ! Ansonsten nur über CSS Code extra !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Guten tag


    Sehen Sie am Bild bei der Seite : http://www.lavecchiagioia.it/


    Da ist es so. Können Sie das mit dem v13 auch so machen? Wenn ja, wie denn bitte? Oder vielleicht ist es möglich zu zeigen wie das mit Code geht, bitte? Danke

    Ein HTML-Objekt nehmen und diesen Code reinschreiben.



    <a class="btnCUSTOM" href="kontakt.html" target="_self">


    <p2>KONTAKT</p2>
    </a>



    Den LINK musst du dann anpassen auf welche Seite du hinleiten willst !



    Danach dies auf Reiter "Erweitert" einfügen (bei CSS Code)

    CSS
    1. .btnCUSTOM {cursor: pointer; line-height: 4.5em; text-align: center; background: transparent; border: 2px solid #fff; color: #fff; padding: 15px 30px; font-family:"Montserrat", sans-serif; font-size: 18px; font-weight: bold; text-decoration:none; transition: all 0.4s ease-in;}
    4. .btnCUSTOM:hover {color:#000; background: #fff; border-color: transparent;}

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    2 Mal editiert, zuletzt von andy67 ()

    Guten Tag


    Wenn ich ein Html Feld mache,mit dem Code rein, dann unter erweitert den restlichen Code rein, dann erscheint aber nichts auf der Seite???


    Wo schreibe ich das "Kontakt" hin ( da steht es auf Italienisch).


    Oder muss ich auch ein Textfeld mit "Kontakt" schreiben?


    Ich sehe auch im Code kein "text" Feld.


    Bin ich Anfänger,,grün hinter Augen...

    So wie ich diese sehe hat dir andy67 doch alles genau beschrieben.
    Du hast Deinen Seitenhintergrund, das Bild in der Bearbeitung Siten fügst Du ein HTML- Objekt ein und da fügst Du dann diesen Code ein.
    Z.B. Die Seite heiß "kontakt.html" in der Bearbeitung fügst Du dann ein HTML-Objekt ein und da schreibst den Code hinein. Bei andy67 heißt die Seite halt "contatti.html" hier muss Du Deine eintragen.
    Bei dir wird sie kontakt.html heißen oder so.
    Und aufpassen wegen dem CSS- Code.

    Zitat von andy67

    <a class="btnCUSTOM" href="contatti.html" target="_self">

    Lg.

    Thabo-Umasai

    -----------------------------------------------------------------------------------------------------------
    "Was du heute kannst besorgen, das verschiebe nicht auf Morgen...."

    ;)

    Guten Tag Thabo Umsai ( welch Name...)


    Also, ich habe den Code reingeschrieben, den anderen auch. Aber es ist nichts zu sehen auf der Seite.


    UNd meine Frage auch: Textfeld "Kontakt" wo schreibe ich das hin????


    Nochmals zur Erklärung


    Ich möchte ein Wort " Kontakt" so haben, das ein Rahmen aussenrum ist. Bei Kontakt mit der Mua wird das anders.


    Was Sie meinen, ist die Seite, wo es hinverlinkt wird (.html)- schon klar...

    Sorry, aber das Forum verschluckt manchmal Code ;) !


    <a class="btnCUSTOM" href="kontakt.html" target="_self">
    <p2>KONTAKT</p2>
    </a>

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    2 Mal editiert, zuletzt von andy67 ()

    was geht nicht?
    Bissi genauere Angaben um helfen zu können?
    Ich habe es 1zu 1 einbauen können, funktioniert einwandfrei

    Bernie


    " Was wir alleine nicht schaffen, das schaffen wir dann zusammen..."


    :thumbsup:

    Hallo Gast,


    ich habe das auch problemlos nachbauen können, obwohl ich vom Programmieren keine Ahnung habe.
    Im Anhang habe ich eine PDF mit einer bebilderten Anleitung beigefügt. Damit sollte es jeder auch ohne Fachkenntnisse (so wie ich) hinbekommen.
    Dauert keine 5 Minuten.
    Danke an Andy für die Codes!


    Gruß
    Rado

    Ich denke hier hast Du die Falsche *.pdf Datei erwischt. Denn die hast Du schon in einem anderen Post angeboten…

    Lg.

    Thabo-Umasai

    -----------------------------------------------------------------------------------------------------------
    "Was du heute kannst besorgen, das verschiebe nicht auf Morgen...."

    ;)

    @maniacsparadise


    Habe Interesse an deinem Tutorial zu diesem Thema. WIe Thabo schon schreibt, war das nicht der richtige Anhang.

    Hier "hängt nix" ;)
    War nur ein Wunsch, denn wenn sich maniacsparadise schon die Mühe gemacht hat, es in einem Tutorial zusammen zu fassen, freuen wir und doch alle über das Ergebnis, oder?

    Danke, alles super!
    Der gesamte Beitrag ist hilfreich - wie immer, besonderen Dank an andy